コントラスト比チェッカー(WCAG輝度)
前景色と背景色を入力すると、以下で現在のWCAG相対輝度とコントラスト比(AA/AAA)が計算されます。プレビュー下の右側のスウォッチは、現代のWCAG計算式が各色をどう『見る』かを示し、左側のスウォッチは1953年の放送技術者のルマ計算式が同じ色に対して示したであろう結果を表します — 新旧を直接比較できます。
なぜ緑が赤や青より重視されるのか — そしてなぜ法律は今も1953年の計算式を使うのか 🖖
輝度計算式の重み付け(現在は緑重視の0.2126、1953年当時は0.299/0.587/0.114)は恣意的なものではありません。これらはCIE 1931標準観測者に由来しており、人間の目の錐体反応と視感効率曲線が、赤や青よりも緑の光にはるかに敏感であることを明らかにしています。NTSCは1953年、まさにこの種の重み付き合計を必要としていました。新しいカラー放送が、すでに各家庭にある何百万台もの白黒テレビでも正しいグレースケール映像として映るようにするためです — 『ルマ』は知覚的な理想として考案されたのではなく、後方互換性のためのハックとして生まれたのです。この歴史は今日でも重要です。なぜなら、上でチェックしたWCAG 2のコントラスト比は法的な効力を持つ基準であり(ADAやEN 301549で引用されています)、それでも視覚科学者からは欠陥があると見なされているからです。暗い背景に明るい文字のコントラストを過小評価し、明るい背景に暗い文字のコントラストを過大評価することが知られており — このサイト自体がデフォルトでダークテーマを採用していることを考えると、まさに直結する問題です。WCAG 3の草案にある後継案APCAは、この非対称性を適切にモデル化していますが、それが正式に採用されるまでは、上記の計算式こそが実際に満たすことを求められる基準であり続けます。
コントラスト比が本当に測るもの 🖖
このツールが示す数値は相対輝度の比です:(L1 + 0.05) / (L2 + 0.05)。ここで L1 は明るい色、L2 は暗い色を表します。値は 1:1(同一で見分けのつかない色)から 21:1(純白の上の純黒)まで変化します。両方に足される 0.05 は丸めではなく、実際の画面が室内から反射する弱い環境光を表したもので、そのため『純黒』でさえ決してゼロにはなりません。WCAG AA を満たすには、本文で 4.5:1、大きな文字で 3:1 を目指しましょう。
法律に凍結された誤植 🖖
この式は各 sRGB チャンネルを区分的な曲線で線形化し、ある閾値で線形部分からガンマ指数へ切り替わります。WCAG 2 はその切り替えを 0.03928 に置いていますが、本来の sRGB 規格では 0.04045 です。WCAG の値は誤植で、数値が修正される前の初期の sRGB 草案から書き写されたものであり、以来、国際的に引用されるアクセシビリティ法規に固定されたままです。この誤差が結果を動かすのは 10⁻⁴ 未満なので、誰も文言を直そうとしていません。
例題
- このサイト自身のテーマ - このサイト自身のダークテーマ: 13.46:1、AAA合格
- 白地に黒(最大値) - 白地に黒: 21:1、理論上の最大比率
- 有名な『ぎりぎりAA』グレー - 白地に#767676: 4.54:1、『ぎりぎりAA合格』として有名なグレー
- 大きいテキストのみ合格 - 3.96:1 — 大きいテキストのAA基準(3以上)は合格だが、通常テキストのAA基準(4.5以上)は不合格
- 青地に赤(古いテレビ) - 青地に赤: 2.15:1、鮮やかに見えても実際はAAに完全に不合格