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 以上
実装時のよくある失敗
・同じブランドカラーでも背景色や文字サイズで判定は変わります。前景と背景の組合せを計算してください。
・半透明色は背後の色と合成した最終表示色で評価します。背景が複雑な場合は、あり得る各背景との組合せを確認してください。
通常テキスト、リンクやフォーカス表示などの状態を確認します。非アクティブなUI部品などWCAGの適用除外に当たる場合もあるため、基準の適用条件を確認してください。
関連ツール
よくある質問
なぜ AA で 4.5:1？
WCAG 2.x は 20/40 視力（およそ 0.5）の人が読める下限として 4.5:1 を採用しました。より視力が低い人（20/80）向けの AAA が 7:1 です。
コントラスト比の計算は浮動小数点？
基準判定は丸め前の計算値で行います。表示上の丸めで4.5に見えても、実値が4.5未満なら通常テキストのAA基準を満たしません。
色覚多様性（色盲）への配慮は別？
WCAG 1.4.1「色の使用」が別に定められています。色だけで情報を伝えず、アイコン・形・文字でも区別できる設計が必要です。コントラスト比だけでは不十分です。
出典・参考資料
本文は上記資料を参考にした解説です。仕様やサービスの運用は変更されることがあるため、実際の利用時は公式資料も確認してください。