文字色と背景色の組合せ

↑

簡易背景色チェッカー






W3Cの明度計算式

W3Cが提唱している明度計算式は下記である。
brightness(r,g,b) = (r* 299.0 + g * 587.0 + b * 114.0) / 1000.0;
とごかで見たことのあるような数式と思う人もあるだろうが、これはRGB値をテレビ放送の電波伝搬でYIQ値に変換する方程式を参考に作られたものとのこと。

この数式を見たらすぐ分かるように、この値が最低になるのは(r,g,b)=(0,0,0)つまり黒の時で値は0、最高になるのは(r,g,b)=(255,255,255)つまり白の時で値は255になる。

W3Cは背景色と文字色の明度差が125以上になるようにすることを勧めている。↑の考察から、どんな色を背景色にとっても、明度差が最大になる文字色は必ず白か黒である。従って背景色の明度を計算して、その値が128未満なら文字色は白、それ以上なら黒を選べばよいことになる。

W3Cの↓の文書では更に「色の差」があったほうが望ましいとしている。 color_difference = abs(r1-r2) + abs(g1-g2) + abs(b1-b2); (↓の文書では難しい計算式が書かれているが、↑のように変形した方が見やすいし計算も楽)。
この値は500以上が望ましいとされている。

他にも示唆に富むことが書かれている。詳しくは↓の文書を参照のこと。

参照
Techniques For Accessibility Evaluation And Repair Tools