WCAG コントラスト比 4.5:1 の根拠と、実装で見落としがちなポイント

約6分
アクセシビリティWCAGデザイン

「文字色と背景色のコントラスト比は 4.5:1 以上にする」という基準は、Web アクセシビリティの初歩としてよく登場します。具体的にどこから来た数字で、どう計算するのかは見落とされがちなので、本記事では WCAG のコントラスト要件を整理します。

4.5:1 の出典：WCAG 2 の Success Criterion 1.4.3

「4.5:1」は WCAG 2.0/2.1/2.2 の達成基準 1.4.3「コントラスト（最低限）」 で定義されている数値で、AA レベルの合格ラインです。

レベル通常テキスト大きいテキスト該当する達成基準
AA4.5 : 13 : 11.4.3
AAA7 : 14.5 : 11.4.6

「大きいテキスト」の定義は：

  • 18pt（24px）以上の通常文字、または
  • 14pt（18.66px）以上の太字

これより小さい文字は「通常テキスト」扱いで、4.5:1 が必要です。

なぜ 4.5:1 なのか

WCAG では「通常の視力（20/40 程度）の人がテキストを快適に読める」ことを根拠としています。20/40 は標準視力の半分程度の見え方で、加齢や軽度の視覚障害で多くの人が経験する範囲です。

研究では、視力が落ちるとコントラストの認識能力（contrast sensitivity）も落ちます。視力 20/40 の人が、視力 20/20 の人と同じ快適さで文字を読むためには 3〜4.5 倍のコントラストが必要というデータがあり、これを安全側に倒したのが 4.5:1 という数字です。

コントラスト比の計算式

「コントラスト比」は単純な明度差ではなく、相対輝度（relative luminance）の比で計算されます。

contrast = (L1 + 0.05) / (L2 + 0.05)
  • L1 は明るい色の相対輝度
  • L2 は暗い色の相対輝度
  • +0.05 は周辺光の影響を補正する経験的な補正値

相対輝度 L は sRGB の RGB 値を線形化してから加重和を取ります：

sRGB → 線形化:
  C_linear = ((C_srgb / 255 + 0.055) / 1.055)^2.4   if C_srgb / 255 > 0.04045
  C_linear = C_srgb / 255 / 12.92                    otherwise

L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear

緑の係数（0.7152）が圧倒的に大きいのは、人間の目が緑に最も敏感だからです。同じ明度に見える純赤と純緑では、緑のほうが相対輝度が高くなります。

単純な「平均明度の比」ではない

注意点として、コントラスト比は HSL の L（明度）の比でも、RGB 平均値の比でもありません。色相によって人間の感度が違うので、線形化＋加重和が必要です。

たとえば次の2組はどちらも「明度差が同じくらい」に見えても、コントラスト比が大きく違います：

  • 黒 (#000) vs 白 (#FFF) → 21 : 1
  • 黒 (#000) vs 純黄 (#FF0) → 19.56 : 1
  • 純赤 (#F00) vs 黒 (#000) → 5.25 : 1

純赤と黒のコントラスト比は意外と低く、5.25:1 です。AA は通るが AAA は通らない範囲で、要素が小さいと読みづらく感じる可能性があります。

実装で見落としがちなポイント

1. ホバー・フォーカス状態も基準を満たす必要がある

ボタンの通常時のコントラストが 4.5:1 でも、ホバー時に色が変わってコントラストが下がるケースは多いです。状態ごとに比をチェックする必要があります。

2. プレースホルダーは要件外と思われがちだが対象

WCAG 2.1 から 1.4.11「非テキストのコントラスト」（3:1）が追加され、プレースホルダーのような UI コンポーネントもこの基準に含まれます。「薄いグレーで読めなくてもプレースホルダーだから良い」は通用しません。

3. 透明色の重ね合わせは実際の合成色で計算する

rgba(0, 0, 0, 0.5) を背景の上に重ねた場合、実際のコントラスト比は重ね合わせ後の合成色で計算する必要があります。半透明レイヤーを多用すると、計算上は通っているつもりが実際の見え方では落ちている、ということが起きます。

4. 「装飾的」テキストは対象外

ロゴの中の文字や、純粋に装飾目的のテキストは WCAG 1.4.3 の対象外です。ただし「装飾的」の判断は実装側ではなくユーザー側に立つべきで、情報を読み取る必要があるテキストは装飾扱いしないほうが安全です。

5. リンクとそれ以外のテキストの区別

リンクの色だけで「これはリンクです」と示している場合、リンクとそうでないテキストの間にも 3:1 以上のコントラストが必要です（WCAG 1.4.1 色の使用）。下線をつけるのが一番確実な解決策です。

まとめ：基準の覚え方

実装時に頭に入れておきたい数字：

  • 4.5 : 1（通常テキスト AA、最も多用する基準）
  • 3 : 1（大きいテキスト AA、UI コンポーネント）
  • 7 : 1（通常テキスト AAA、より厳しい基準）

WCAG は「読める可能性」のフロアを決めているもので、上限ではありません。可能なら AAA を狙ったほうが、視覚障害のあるユーザー以外にも読みやすくなります。

実際の色の組み合わせが基準を満たすかは、本サイトのコントラストチェッカーで2色を入れて確認するのが手早いです。AA / AAA / 大きいテキスト判定を同時に表示するので、迷ったときの即答に使えます。