色のコントラスト：四捨五入で4.5でも基準を満たさない理由
sRGBのコントラスト比を丸めずに比較し、色の組み合わせの確認と画面全体のアクセシビリティを区別します。
計算方法
コントラストは、文字と実際の背景との相対輝度の差を表します。バッジの内側に描画される色を確認してください。周囲の結果パネルが暗くても、明るいバッジに薄い文字を載せると読みにくくなります。
不透明なsRGB色では、赤・緑・青の各成分を正規化し、線形化して相対輝度を求めます。明るい色の輝度に0.05を足し、暗い色の輝度に0.05を足した値で割ります。黒と白は21:1、同じ色同士は1:1です。
白背景にRGB 119,119,119を使うと約4.478089:1、RGB 118,118,118なら約4.542225:1です。小数第1位までの表示では両方が4.5になり得ますが、通常の文字に対するAA基準4.5:1を満たすのは後者だけです。判定には丸め前の比率を使います。
データを見る
- RGB 119,119,119
- 4.478089 :1 4.478089… < 4.5
- RGB 118,118,118
- 4.542225 :1 4.542224… > 4.5
計算例
白背景にRGB 119,119,119を使うと約4.478089:1、RGB 118,118,118なら約4.542225:1です。小数第1位までの表示では両方が4.5になり得ますが、通常の文字に対するAA基準4.5:1を満たすのは後者だけです。判定には丸め前の比率を使います。
定義に該当する大きな文字のAA基準は3:1です。文字サイズと太さが条件を満たす必要があり、バッジの幅だけでは大きな文字になりません。通常の文字のAAA基準は7:1です。先に対象となる文字の区分を確認してください。
L = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)
contrast = (lighter L + 0.05) / (darker L + 0.05)
RGB(119,119,119) on white ≈ 4.478089 : 1
RGB(118,118,118) on white ≈ 4.542225 : 1
二つの色の結果だけでページ全体の適合性は証明できません。ホバー、フォーカス、エラー、無効状態、両方のテーマ、透明度、グラデーション、背景画像を確認します。文字サイズ、キーボード操作、非テキストの表示も調べ、色だけに意味を頼らないラベルを付けましょう。
データを見る
- RGB 119,119,119
- #777777
- RGB 255,255,255
- #FFFFFF
- 結果
- 4.478089 : 1
確認事項と限界
二つの色の結果だけでページ全体の適合性は証明できません。ホバー、フォーカス、エラー、無効状態、両方のテーマ、透明度、グラデーション、背景画像を確認します。文字サイズ、キーボード操作、非テキストの表示も調べ、色だけに意味を頼らないラベルを付けましょう。