色コントラストの確認方法
実際に隣り合う2つの単色を確認するときに使います。文字色の組み合わせだけを調べ、ページ全体は検査しません。
- 文字色を3桁または6桁のHEXで入力します。
- 文字の背後にある単色を入力します。
- コントラストを確認を選びます。
- 比率と各合格・不合格表示を読みます。
- 実際の別の状態や色の組も個別に確認します。
公式の計算式
sRGB各チャンネルを正規化し、0.04045を境に線形化します。相対輝度は0.2126R + 0.7152G + 0.0722B、比率は明るい側をL1として(L1 + 0.05) / (L2 + 0.05)です。
AA・AAAの基準
AAは通常文字4.5:1、大きな文字3:1以上です。AAAは通常文字7:1、大きな文字4.5:1以上です。大きな文字は通常18pt以上、太字14pt以上で、CJKでは同等サイズを使います。
丸めと対応範囲
4.499:1は4.50と表示されても4.5:1を満たしません。判定は内部精度を保ちます。不透明HEX2色のみで、透明度、グラデーション、画像、サイト全体スキャンには対応しません。
別に確認する項目
- リンク、フォーカス、エラー、無効状態。
- 画像上の文字や別テーマ。
- 実際の文字サイズ、太さ、書体。
- キーボード、拡大、意味構造など他のアクセシビリティ要件。
計算例
#000000と#FFFFFFは21.00:1で、4基準すべてに合格します。
白に#767676は4.5:1を上回りますが、#777777は下回ります。
よくある質問
#は省略できますか？
はい。3桁または6桁なら#の有無を問いません。
透明色に対応しないのはなぜですか？
実効色が合成先に依存するため、このページは不透明2色に限定しています。
合格ならサイト全体がWCAG準拠ですか？
いいえ。この色の組と数値基準だけの結果です。
16px本文はどの基準ですか？
通常文字としてAAなら4.5:1以上を使います。