文字色と背景色のコントラスト
コントラストに配慮した色の指定
- 計算式 － W3C が公開している計算式を使用して適切なコントラストを算出する
- 明度差 （color brightness difference） を求める計算式
- 色の差 （color difference） を求める計算式
- 計算例 － コントラスト計算例
計算式 － W3C が公開している計算式を使用して適切なコントラストを算出する
文字の色とその背景色のコントラスト（色の差、明度差）を十分にすると、文字の読みやすさが良くなります。すなわちアクセシビリティの面で考慮しなければならないことです。
適切なコントラストを適用するには、2000年4月26日付けで W3C 草案 （Working Draft） として公開されている 「Techniques For Accessibility Evaluation And Repair Tools」 のなかで紹介されている計算式を参考にしています。
ここでは、二つの色の明度差（color brightness difference）が１２５以上（最大値は２５５）となり、色の差（color difference）が５００以上（最大値は７６５）であるとコントラストが良いとされています。
明度差 （color brightness difference） を求める計算式
【計算式】 ((R x 299) + (G x 587) + (B x 114)) ÷ 1000
- RGB は色の RGB 値を 0～255 の１０進数で表したもの。
【計算例】 黄色（#ffff00 = 255:255:0）と水色（#00ffff = 0;255:255）を比較します
- 黄色： ((255 x 299) + (255 x 587) + (0 x 114)) ÷ 1000 = 225.93
- 水色： ((0 x 299) + (255 x 587) + (255 x 114)) ÷ 1000 = 178.755
- 明度差： 225.93 - 178.755 = 47.175 ← 基準値 125 を大きく下回る
色の差 （color difference） を求める計算式
【計算式】 (max(R1,R2) - min(R1,R2)) + (max(G1,G2) - min(G1,G2)) + (max(B1,B2) - min(B1,B2))
- 比較する色１と色２の RGB 値を 0～255 の１０進数で表したあと、R1、R2、G1、G2、B1、B2 それぞれに代入して計算する。max は与えられた2つの値のうち大きい方を返し、minは小さい方を返す関数です。
【計算例】 黄色（#ffff00 = 255:255:0）と水色（#00ffff = 0;255:255）を比較します
- (max(255,0) - min(255,0)) + (max(255,255) - min (255,255)) + (max(0,255) - min(0,255))
- = (255 - 0) + (255 - 255) + (255 - 0)
- = 510 ← 基準値 500 を満たす
計算に基づくコントラストの算出
計算に基づくコントラストの算出はあくまで二つの色の関連をシミュレーションするのであり、これら二つの色の周辺で使われている色、例えばボーダーの色などによっても読みやすさは違ってきます。すべての場合に等しく完全な読みやすさを保障するものでもありません。
輝度比に基づくコントラスト
2008年12月 W3C 勧告 （Recommendation） として公開されている 「Web Content Accessibility Guidelines 2.0」 には、輝度比 （relative luminance） に基づいてコントラストを計算する方法が掲載されています。
計算例 － コントラスト計算の例
明度差が不足している例（上記計算例）
- 文字色： 黄色 #ffff00 （255:255:0 ）
- 背景色： 水色 #00ffff （ 0:255:255）
- 明度差： 47 基準値 125 に対して大幅に不足
- 色の差： 510 基準値 500 を満たしている
色の差が不足している例
- 文字色： 赤色 #ff0000 （255: 0: 0 ）
- 背景色： 黄色 #ffff00 （255:255: 0）
- 明度差： 150 基準値 125 を満たす
- 色の差： 255 基準値 500 に対し不足
明度差/色の差が共に不足している例
- 文字色： #3366ff （51: 102: 255 ）
- 背景色： #33cccc （51:204:204）
- 明度差： 54 基準値 125 に対し不足
- 色の差： 153 基準値 500 に対し不足
明度差/色の差が共に基準を満たす例
- 文字色： #3333ff （51: 51: 255 ）
- 背景色： #ffff00 （255:255:0）
- 明度差： 152 基準値 125 を満たす
- 色の差： 663 基準値 500 を満たす
当サイトで使用する H1 の色と背景色の例
- 文字色： white #ffffff （255: 255: 255）
- 背景色： blue #0000ff （0: 0: 255）
- 明度差： 226 基準値 125 を満たす
- 色の差： 510 基準値 500 を満たす
当サイトで使用する H2 の色と背景色の例
- 文字色： #000000 （0: 0: 0）
- 背景色： #00ffff （0: 255: 255）
- 明度差： 178 基準値 125 を満たす
- 色の差： 510 基準値 500 を満たす
当サイトで使用する H3 の色と背景色の例
- 文字色： #ffffff （255: 255: 255 ）
- 背景色： #cc0000 （204: 0: 0）
- 明度差： 194 基準値 125 を満たす
- 色の差： 561 基準値 500 を満たす
当サイトで使用する H4 の色と背景色の例
- 文字色： #ffffff （255: 255: 255 ）
- 背景色： #ff3300 （255: 51: 0）
- 明度差： 149 基準値 125 を満たす
- 色の差： 459 基準値 500 を満たさない
当サイトのクラス Steps の色と背景色の例
- 文字色： #000099 （0: 0: 153 ）17.442
- 背景色： #ffffcc （255: 255: 204）249.186
- 明度差： 232 基準値 125 を満たす
- 色の差： 561 基準値 500 を満たす