WCAGコントラスト比と色覚アクセシビリティの基準
Webアクセシビリティの国際基準WCAG 2.1では、色の組み合わせのコントラスト比が明確に定められています。本記事では基準値・計算式・色覚特性への配慮を整理し、HSLの明度差を使った実務的な確保方法を解説します。
1. WCAG 2.1のコントラスト比基準
WCAG 2.1 Success Criterion 1.4.3（Level AA）では、通常テキスト（18ポイント未満、または14ポイント未満の太字）は背景とのコントラスト比4.5:1以上、大きいテキスト（18ポイント以上、または14ポイント以上の太字）は3:1以上が求められます。SC 1.4.11（Level AA）はボタン・フォーム境界線などUIコンポーネントにも3:1以上を要求します。より厳しいLevel AAAは通常テキスト7:1、大きいテキスト4.5:1です。日本国内のJIS X 8341-3も同じ基準を採用しています。
2. コントラスト比の計算式
コントラスト比は(L1 + 0.05) / (L2 + 0.05)で算出します。L1は明るい方の相対輝度、L2は暗い方の相対輝度です。相対輝度は各色のsRGB値をリニア化（γ補正の逆）してから、L = 0.2126 R + 0.7152 G + 0.0722 Bで計算します。緑が最も輝度に効き、青が最も効かないので、青背景・白文字は意外と高いコントラストになります。
3. HSLの明度差で概算する
厳密な計算は外部ツールに任せるとして、HSLの明度Lだけで大まかなコントラスト確保の目安が得られます。一般的に、文字色と背景色のL差が50ポイント以上あれば4.5:1を超えやすく、35ポイント以上で3:1が確保しやすいです（色相と彩度にも影響されるため最終確認は必要）。デザインの初期段階ではHSLでLを意識しながら配色し、リリース前にWebAIM Contrast Checkerなどで実測する2段階が現実的です。
4. 色覚特性のある人への配慮
日本人男性の約5%・女性の約0.2%が色覚特性（P型/D型/T型）を持ち、赤と緑の区別が難しい人が多くいます。WCAG SC 1.4.1（Level A）は「情報伝達に色だけを使わない」ことを求めています。具体的には、エラーメッセージを「赤い文字」だけでなく「⚠️ アイコン＋赤文字＋『エラー』ラベル」のように冗長化、グラフの系列を色だけでなく「線種＋ラベル」で区別、リンク色だけでなく下線も付ける、といった対応です。
5. ダークモードでも基準は同じ
ダークモードに切り替えてもコントラスト比の基準は変わりません。背景#0f172a（濃紺）に文字#e2e8f0（薄いグレー）なら、コントラスト比は約12:1で十分です。注意したいのは「ダーク版のリンク色」で、ライト版で青(#2563eb)が、ダーク版で同じ色のままだとコントラスト不足になることがあります。HSLで明度を上げて(hsl(221 83% 70%)のように)、暗い背景でも視認できる色に調整するのが定石です。
6. 確認ツールと運用
実装後の確認はChrome DevToolsのLighthouseアクセシビリティ監査、WebAIM Contrast Checker（webaim.org/resources/contrastchecker/）、axe DevToolsなどが定番です。CSS設計段階では本記事のカラーコード変換ツールでHEXをHSLに直し、明度Lの差を確認するのが早道です。リリース後も配色を変えるたびに監査ツールを通すフローを組んでおくと、アクセシビリティの担保が継続的に行えます。