文字が読みやすいかどうかは、色相(色み)よりも明るさの差で決まります。黄色の上の白い文字はほとんど読めませんが、これは色が違っても明るさが近いためです。逆に、明るさが十分に離れていれば、色みが同じ系統でも読みやすくなります。
この「明るさ」を数値にしたものが相対輝度です。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(黒と白)までの範囲になります。
Web アクセシビリティの指針 WCAG では、読みやすさの基準がコントラスト比で決められています。
通常の文字 … 4.5:1 以上(AA) 大きい文字 … 3:1 以上(AA) より高い水準 … 7:1 以上(AAA)
本文のような小さな文字ほど、高いコントラストが必要になります。
配色で読みやすさを確保するコツは、色みを変えるだけで満足しないことです。彩度の高い赤と緑のように、明るさが近い色どうしは、色が違っても見分けにくくなります。文字と背景は、まず明度をしっかり離す。これが視認性の土台です。