概要 WCAG コントラスト
比率と AA/AAA 判定
使い方
2 つの色を入力すると WCAG のコントラスト比が表示され、テキストや UI 要素に対する AA・AAA の合格・不合格が即座に判定されます。
WCAG コントラスト
WCAG コントラスト基準
WCAG AA は通常文字 4.5:1、大きな文字 3:1 以上を要求します。AAA は 7:1 と 4.5:1 に引き上げます。
大きな文字は 18pt 通常または 14pt 太字以上です。UI アイコンとフォーカス表示も背景に対して 3:1 を満たすべきです。
確認と修正
文字色と背景色を入力するか、色相と彩度を保ったままスライダーで明度を動かします。
提案パネルは AA を満たす近い色を提示します。選択してコピーした後、実際の背景画像やオーバーレイ上でも再確認してください。
よくある質問
AA と AAA の違いは？
AA は基本的なアクセシビリティ基準、AAA はより厳しい基準です。長文には AAA、製品 UI には AA が一般的です。
大きな文字とは？
18pt（24px）または 14pt（18.66px）太字以上です。通常文字より低いコントラスト比で済みます。
ブラウザで比率が違うのはなぜ？
ブラウザが透明度、オーバーレイ、画像背景を適用するためです。宣言値だけでなく最終表示色を測定してください。
本番環境で使えますか？
はい。通常の HEX 値です。無効状態やホバー状態を含め、実際の文脈で再確認してください。