🌓 カラーコントラスト検査
文字色と背景色のコントラスト比をWCAG 2.1の相対輝度から計算し、AA・AAAの合格/不合格を判定します。実際の日本語サンプルでプレビューでき、AA不合格時は合格する近い色も提案します。すべての処理はブラウザ内で完結し、入力内容はサーバーに送信されません。
—
コントラスト比
| 基準 | 必要比 | 判定 |
|---|
通常テキスト 16px：吾輩は猫である。名前はまだ無い。The quick brown fox.
大きいテキスト 24px 太字
大きいテキスト＝18pt（約24px）以上、または14pt（約18.66px）太字以上を指します。
📘 使い方
- 「文字色」と「背景色」をカラーピッカーまたはHEX入力欄で設定します。両者は自動的に同期します。
- 「入れ替え」ボタンで文字色と背景色を素早く交換できます。
- コントラスト比が大きく表示され、AA・AAAそれぞれの合格/不合格が通常テキスト・大きいテキスト別に判定されます。
- AA（通常テキスト）が不合格の場合は、合格する近い文字色が提案されます。「適用」で文字色に反映できます。
❓ よくある質問
コントラスト比はどのように計算していますか？
WCAG 2.1に基づき、各色のsRGB値を線形化（c/12.92 または ((c+0.055)/1.055)^2.4）して相対輝度Lを求め、(L明+0.05)/(L暗+0.05) で比率を算出します。値は 1:1（同色）〜 21:1（黒と白）の範囲になります。
AAとAAAの違いは何ですか？
AAは一般的な適合レベルで、通常テキストは4.5以上、大きいテキストは3以上が必要です。AAAはより厳格な最高レベルで、通常テキストは7以上、大きいテキストは4.5以上が求められます。
「大きいテキスト」の基準を教えてください。
18pt（約24px）以上、または14pt（約18.66px）以上かつ太字（bold）のテキストを指します。大きい文字は視認しやすいため、必要なコントラスト比の基準がやや緩和されます。
入力した色はサーバーに送信されますか？
いいえ。輝度計算・比率判定・改善案の生成はすべてブラウザ内（クライアントサイド）で行われ、サーバーへ送信されることはありません。オフラインや file:// でも動作します。