コントラスト比の計算方法（WCAG の判定）

文字色と背景色のコントラスト比を、WCAG（ウェブアクセシビリティのガイドライン）の定義で求めます。

$Y_1$ は明るいほうの相対輝度、$Y_2$ は暗いほうの相対輝度、$C$ がコントラスト比です。0.05 を足しているのは、画面が完全な黒を出せず、まわりの光をいくらか反射することを見込んだものです。これがないと、黒どうしの比が無限大になってしまいます。

相対輝度

$R_l$、$G_l$、$B_l$ は、各色を光の量に比例する値へ戻したものです。画面の色は目の感じ方に合わせて曲げてあるので、明るさを比べるには、その曲げをいったん戻す必要があります。

基準

比は 1（同じ色）から 21（黒と白）までの値をとります。

• AA は本文に 4.5 以上、大きな文字に 3 以上
• AAA は本文に 7 以上、大きな文字に 4.5 以上

大きな文字とは、18 ポイント以上、または太字で 14 ポイント以上のものを指します。

例

灰色（90, 90, 90）の文字を白い背景に置くと、コントラスト比は 6.90 で、AA を満たします。

文字の相対輝度は 0.102、背景は 1 です。(1 + 0.05) ÷ (0.102 + 0.05) = 6.90 になります。7 にわずかに届かないので、AAA には足りません。

注意点

コントラスト比だけで読みやすさが決まるわけではありません。字の大きさ、太さ、書体も効きます。

色の違いだけで意味を伝えないでください。色を見分けにくい人には届きません。