WCAG の 4.5:1 コントラスト比はどこから来たのか — 計算式と科学的根拠

W3C WCAG 2.2 の "Contrast Ratio" 定義によれば、2つの色の間のコントラスト比は以下で定義されます。

contrast_ratio = (L1 + 0.05) / (L2 + 0.05)

ここで:

• L1: 明るい方の相対輝度(relative luminance)
• L2: 暗い方の相対輝度
• 0.05 は "視点周辺環境光" を反映するフラッシュオフセット

結果の値域は 1.00(同色) 〜 21.00(黒と白)。比率の形式で表記されるため 4.5:1 のように書きます。

相対輝度は、sRGB 色空間における各色の明るさ成分で、人間の視覚感度に合わせて R/G/B を重み付けして合成します。

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

係数 0.2126 / 0.7152 / 0.0722 は ITU-R BT.709(HDTV規格)の輝度係数で、人間の目が緑に最も敏感で、青には鈍感という視覚特性を反映しています。

ただし R/G/B はそのまま使わず、ガンマ補正を外した線形値にしてから掛けます。sRGB 色空間のガンマ補正は近似的にγ=2.2 ですが、WCAG は正確な変換式を定めています:

c' = (c / 255)           // [0, 1] に正規化
c_linear = (c' ≤ 0.03928) ? c' / 12.92 : ((c' + 0.055) / 1.055)^2.4

R, G, B それぞれに適用してから、0.2126/0.7152/0.0722 で合成します。

WCAG 2.0 の原案を作成した Gregg Vanderheiden 博士らは、仕様書内で 4.5:1 という数字の根拠を次のように説明しています(WCAG Understanding 文書より抜粋・意訳)。

通常の視覚を持つ人が「読みやすい」と感じる最低限のコントラスト比はおよそ 3:1。視力 20/40(矯正で 0.5)程度の人にとっても、その1.5倍のマージンを取れば同等の可読性を確保できると推定され、結果として 4.5:1 という値が導かれた。

20/40 は高齢者や軽度の視覚障害者に相当する視力で、日本の運転免許保有の最低視力(0.7)より少し下の水準です。WCAGはこの層まで含めた"合理的配慮"としてコントラストを設計しています。

この設計は Weber-Fechner 則(感覚の強度は刺激の対数に比例する、という心理物理学の古典的法則)にも整合的です。輝度差の"感じ方"は比率で決まるため、絶対輝度の違いではなく比率で規定することに理論的根拠があります。

* "大きいテキスト" = 18pt以上 または 14pt以上 かつ太字

AAA の 7:1 は視力 20/80(矯正しても 0.25 程度)の人を想定した設定です。公共サービスや医療情報など、高齢者・視覚障害者が多い用途では AAA を目指すことが推奨されます。一般的なWebサイトは AA で十分とされ、実務でも AA をターゲットにすることが多いです。

ただしアイコン・グラフの色、ボタンの境界線は WCAG 2.1 で追加された 1.4.11 "Non-text Contrast" で最低 3:1 が要求されます。テキストだけに目を向けていると見落とす基準です。

WCAG 2.x のコントラスト式は、ダークモードや飽和色で直感に反する結果を出すことが知られています(例: 黒背景に鮮やかな黄色文字が 4.5 を満たすのに読みづらい)。

この問題を解決するため、WCAG 3.0 ドラフトで採用候補となっているのが APCA (Advanced Perceptual Contrast Algorithm) です。APCA は:

• 比率ではなく知覚コントラスト Lc 値(-106 〜 +106)を使う
• フォントサイズ・太さに応じた可読性閾値を提供
• 背景と前景の順序を区別する(暗→明 と 明→暗 は非対称)

2026年時点では WCAG 3.0 はまだドラフトで、公式基準としては WCAG 2.1/2.2 の 4.5:1 が有効です。ただし、APCA の知見を踏まえて「4.5:1 を満たしていても目視確認を省略しない」のが実践的な姿勢です。

1. 設計段階で確認する: Figma / Adobe XD のプラグイン、本サイトの WCAG コントラストチェッカー、Chrome DevTools の Lighthouse などで設計時にチェック
2. CSS変数化: プライマリ色・リンク色・テキスト色のペアを CSS 変数で管理し、ダークモード切替でもコントラストを維持
3. フォーカスリングも対象: :focus 時の枠線・背景も 3:1 を確保。キーボードユーザーの操作精度に直結
4. ユーザーテストを省略しない: 4.5:1 を満たしても "読める" とは限らない。実際に高齢者・視覚障害者を含むテストで検証できればベスト

• コントラスト比 = (L1 + 0.05) / (L2 + 0.05)、L は BT.709 の相対輝度
• 相対輝度の計算には sRGB → 線形化 の変換が必須(単純な R+G+B 平均は誤り)
• 4.5:1 の根拠は「通常視力の最低 3:1 × 視力 20/40 の 1.5倍マージン」
• AA は 4.5:1、AAA は 7:1。非テキストは 3:1 以上(WCAG 2.1, 1.4.11)
• WCAG 3.0 で APCA への移行が検討中だが、2026年現在は 2.x が公式基準
• 自動チェックで 4.5:1 を満たしても、実機・当事者テストを省略しない