全プロセスの詳細解説
-
#e2e6f0のテキストと#1a1d27の背景のコントラスト比 5 ステップ
#e2e6f0 のテキストと #1a1d27 の背景の間のコントラスト比を求めよ — これは本ページ自身の配色である。各チャンネルを単純平均すると 5.55 になる。WCAG では 13.46 となる。2倍半の違いがどこから生じるのかを突き止めよ。
-
定義は一見単純である。2つの輝度の比率であり、純粋な黒でゼロ除算が発生しないよう、それぞれに 0.05 の補正が加えられている。重み付けは均等ではなく、これが最初の驚きである — 緑には青の10倍もの輝度が割り当てられている。
-
2つ目の驚きは、チャンネル値をそのまま使用できないことである。画像ファイル内のバイト値はガンマ符号化されている。128 は光量が半分であることを意味するのではなく、およそ5分の1であることを意味する。区分定義の数式はこの符号化を元に戻すものであり、自作のコントラストチェックを作成する誰もが省略してしまうステップである。
-
両方の色をその数式に通してみる。明るい色は 0.79、暗い色は 0.0124 になる — バイト値としては約 7 倍しか離れていないのに、物理的な光量では 63 倍もの開きがある。
-
そして 0.05 のオフセットにより、その 63 が 13.46 にまで圧縮され、これがパネルに表示される数値となる。このオフセットは飾りではない。黒を表示しているときでさえ画面が反射する光をモデル化しており、明かりのついた部屋ではダークテーマが無限のコントラストを達成できない理由がここにある。
-
この重み付けは、デザイナーがよく抱く不満を説明している。純粋な緑と純粋な青はどちらも単一チャンネルの最大値であるが、緑は輝度の 0.7152 を占めるのに対し、青はわずか 0.0722 に過ぎない。
解答
ツールには 13.46 : 1 と表示され、AAの 4.5 や AAAの 7 を余裕でクリアしている。手計算で行う理由はガンマ補正のステップにある。これをスキップしてチャンネルを平均化した場合、このペアのスコアは 5.55 となる — これでも合格ラインではあるが、2.4 倍も誤っており、より値の近いペアでは、その誤差が合格と不合格を分けることになる。重み付けがもう半分の理由である。緑は同じチャンネル値の青より9.9倍明るいため、黒背景の青テキストはカラーピッカーでの見かけよりもはるかに見づらく、白背景の黄テキストはデザイナーの予想よりはるかに見やすい。 #0000ff と #000000 を比較して、その比率を読み取ってみよ。
-
参考文献 (2)
- The contrast formula and the 0.03928 threshold block 3 is about: W3C, Web Content Accessibility Guidelines (WCAG) 2.1, "relative luminance" and "contrast ratio" definitions.
- The sRGB transfer function it should have matched: IEC 61966-2-1:1999, Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB, which puts the linear/gamma switch at 0.04045.