このツールでできること
チェッカーは、テキスト色と背景色のWCAGコントラスト比を計算し、WCAG 2.xの4つの閾値(通常テキストと大きなテキストそれぞれのAA・AAAレベル)で合否を判定します。ライブプレビューでは、両方のサイズの実際のテキストとして色を確認できます。
輝度の公式
まず各色の相対輝度を計算します。各RGBチャンネルを線形化し(0.03928以下の値は12.92で割り、それより大きい値は((v+0.055)÷1.055)の2.4乗を使います)、L=0.2126×R+0.7152×G+0.0722×Bとして合成します。係数は人間の目が緑の光に最も敏感であることを反映しています。
コントラスト比は(L1+0.05)÷(L2+0.05)で、L1は明るい方の色の輝度です。1:1(同一色)から21:1(白地に黒)までの範囲です。
計算例
青背景#3B82F6に対する白テキスト#FFFFFFのコントラスト比は約3.7:1です。大きなテキストのAA(3:1必要)には合格しますが、通常テキストのAA(4.5:1必要)には不合格です。見出しには十分ですが、本文には不向きです。
4つの閾値
- AA 通常テキスト:4.5:1。多くの法規制が求める法的な基準ラインです。
- AA 大きなテキスト:3:1。大きなテキストとは18pt以上、または太字で14pt以上です。
- AAA 通常テキスト:7:1。最も厳しいレベルです。
- AAA 大きなテキスト:4.5:1。
注意点
この比率は輝度コントラストのみを測定します。フォントのレンダリング、細いストローク、画像上の透明度、輝度以外の色覚の違いは考慮されません。