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 は画面表面の環境光反射(flare)を反映するオフセット

結果の値域は 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.04045) ? c' / 12.92 : ((c' + 0.055) / 1.055)^2.4

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

0.04045は現行の境界値です。2021年5月以前の定義は0.03928でした。8bit整数を255で割った値は両境界の間に入らないため、その入力集合では分岐の違いは生じません。連続値を扱う説明では現行式を使います。上の ^ は数学上のべき乗表記で、JavaScriptでは ** を使います。

W3CのUnderstanding文書は、ANSI等で参照された3:1を出発点に、視力20/40に関連するコントラスト感度の低下を約1.5倍として扱い、3 × 1.5 = 4.5を説明しています。20/40はSnellen視力表記で、小数視力では0.5に相当します。矯正の有無をこの表記だけから決めることはできません。

これは規格が採用した閾値の根拠を説明するもので、個人の読みやすさを視力の数値だけから保証する式ではありません。7:1についても、同文書は視力20/80に関連する知見を説明しています。

Understandingは規範本文を補足する解説です。特定人物が単独で導いた値や、Weber–Fechner則から直接計算した値とは説明しません。視力とコントラスト感度も同じ指標ではありません。

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

AAA の 7:1 は、AAより高いコントラストを求める基準です。公共サービスや医療情報など、視力が低下した人を含む幅広い利用が想定される用途では、可能な範囲でより高いコントラストを検討します。ただし、適合レベルだけで全利用者の読みやすさが保証されるわけではありません。

非テキストのコントラストは、WCAG 2.1で追加された1.4.11の適用範囲と例外に従って3:1を確認します。テキストだけに目を向けていると見落とす基準です。

1.4.3では無効なUIの文字、装飾、ロゴ等に例外があります。1.4.11の3:1は、UIや状態を識別するために必要な視覚情報、内容理解に必要な図形部分と隣接色の関係が対象で、あらゆる境界線に一律適用されるわけではありません。大きな文字は18ptまたは太字14ptを基準とし、CJKフォントでは同等のサイズを考慮します。CSSでは18pt=24px、14ptは約18.67pxです。

APCA（Accessible Perceptual Contrast Algorithm）は、文字の大きさ・太さや明暗の向きを考慮するコントラスト評価手法です。WCAG 2.xの比率と同じ尺度ではなく、値をそのまま4.5:1へ置き換えることはできません。

2026年9月5日に確認したWCAG 3はWorking Draftです。APCAの採用が確定し、WCAG 2.2の適合判定を置き換えたという説明はしません。実務でWCAG 2.2への適合を評価する場合は、その達成基準を使い、知覚上の確認は補助として行います。

ダークモード、細いフォント、アンチエイリアス、画面環境でも読みやすさは変わります。閾値を満たすことと、すべての利用者が読みやすいことを同一視しないでください。

1. 設計段階で確認する: Figma / Adobe XD のプラグイン、本サイトの WCAG コントラストチェッカー、Chrome DevTools の Lighthouse などで設計時にチェック
2. CSS変数化: プライマリ色・リンク色・テキスト色のペアを CSS 変数で管理し、ダークモード切替でもコントラストを維持
3. フォーカス表示を別途確認: 可視性は2.4.7、作者指定の状態表示と隣接色は1.4.11、AAAの面積・変化前後のコントラストは2.4.13など、対象基準と例外を分けて評価
4. ユーザーテストを省略しない: 4.5:1 を満たしても、すべての人が同じように読めるとは限らない。年齢や見え方の異なる人を含むテストで検証する

比率の合否は丸め前で判定します。4.499:1を4.5へ丸めて合格にはできません。WCAGは技術基準であり、特定地域での法的義務や認証の取得を、この記事だけで判定するものではありません。

• 相対輝度をsRGBの線形値から計算し、(L1 + 0.05) / (L2 + 0.05)を使う。
• 現行の線形化境界値は0.04045。合否は丸め前で判断する。
• 通常文字のAAは4.5:1、AAAは7:1。大きな文字と非テキストの条件・例外を分ける。
• 4.5:1の背景はW3Cの解説に基づく。個人の可読性を一律に保証しない。
• APCAやWCAG 3の議論を、WCAG 2.2への適合判定と混同しない。