WCAG コントラスト比の計算と検証
WCAG 2.1 のコントラスト比基準 AA 4.5:1 / AAA 7:1 は何を意味するのか、実装側でどうテストするのかを実例付きで解説します。
公開 · 更新 · yuzlrin
相対輝度と比の定義
相対輝度 L は RGB 値をガンマ補正 + 重み付け（赤 0.2126 / 緑 0.7152 / 青 0.0722）した値。白は 1.0、黒は 0。
コントラスト比 = (L1 + 0.05) / (L2 + 0.05) ただし L1 ≥ L2
白 (#FFF) と黒 (#000) の比は 21:1 で最大、同じ色同士なら 1:1 で最小です。
AA / AAA の基準
通常文字（18pt 未満、または 14pt bold 未満）:
・AA: 4.5:1 以上
・AAA: 7:1 以上
大きな文字（18pt 以上、または 14pt bold 以上）:
・AA: 3:1 以上
・AAA: 4.5:1 以上
UI コンポーネント（フォーカスリング、アイコン、ボタン枠など）:
・AA Non-text Contrast: 3:1 以上
実装時のよくある失敗
・ブランドカラー #1E90FF (DodgerBlue) を白背景に使うと 3.3:1 で本文は AA 不可
・グレーテキスト #999 を白背景に使うと 2.8:1 で AA 不可、本文不適切
・透明度を上げた黒 rgba(0,0,0,0.5) は背景依存になり厳密な比計算ができない
ボタン・リンクのホバー色、プレースホルダー色、disabled 状態の色まで忘れず検証してください。
関連ツール
よくある質問
なぜ AA で 4.5:1？
WCAG 2.x は 20/40 視力（およそ 0.5）の人が読める下限として 4.5:1 を採用しました。より視力が低い人（20/80）向けの AAA が 7:1 です。
コントラスト比の計算は浮動小数点？
W3C 仕様に従うと相対輝度 L は浮動小数点。比も小数ですが、現場では「4.5 以上か」判定に使うので小数第 1 位までで十分です。
色覚多様性（色盲）への配慮は別？
WCAG 1.4.1「色の使用」が別に定められています。色だけで情報を伝えず、アイコン・形・文字でも区別できる設計が必要です。コントラスト比だけでは不十分です。