コントラストと視認性 ― 明度差と WCAG コントラスト比

読みやすさは「明るさの差」で決まる

文字が読みやすいかどうかは、色相(色み)よりも明るさの差で決まります。黄色の上の白い文字はほとんど読めませんが、これは色が違っても明るさが近いためです。逆に、明るさが十分に離れていれば、色みが同じ系統でも読みやすくなります。

相対輝度とコントラスト比

この「明るさ」を数値にしたものが相対輝度です。RGB を 0〜1 にしてから、人の目の感じ方に合わせて変換し、緑を重く見た重みづけで足し合わせます。

各成分 c(0〜1)を線形化:
  c ≤ 0.03928 → c ÷ 12.92
  それ以外    → ((c + 0.055) ÷ 1.055) の 2.4 乗
相対輝度 L = 0.2126×R + 0.7152×G + 0.0722×B

二つの色の相対輝度から、コントラスト比を次の式で求めます。明るいほうを L1、暗いほうを L2 とします。

コントラスト比 =(L1 + 0.05)÷(L2 + 0.05)

比は 1:1(同じ明るさ)から 21:1(黒と白)までの範囲になります。

WCAG の基準

Web アクセシビリティの指針 WCAG では、読みやすさの基準がコントラスト比で決められています。

通常の文字   … 4.5:1 以上(AA)
大きい文字   … 3:1 以上(AA)
より高い水準 … 7:1 以上(AAA)

本文のような小さな文字ほど、高いコントラストが必要になります。

色みではなく明度で差をつける

配色で読みやすさを確保するコツは、色みを変えるだけで満足しないことです。彩度の高い赤と緑のように、明るさが近い色どうしは、色が違っても見分けにくくなります。文字と背景は、まず明度をしっかり離す。これが視認性の土台です。