WEBページを考察・文字色と背景のコントラスト

面白そうなXHMTLの解説書を入手した。
今までの参考書には記してない箇所もあり、それでも2000年に決められた規格だった。 早速、プログラムを作って楽しんだ。
参考書・詳細
Web標準XHTML+デザイン
クリエイターが身につけておくべき
新・100の法則
発行:株式会社インプレスジャパン
定価:本体2,200円+税

増えてしまった参考書

左端は今回入手した参考書。
右端は平成9年に購入。それから、随分買い足して、現在、17冊です。その間、何部か人様にさし上げた物もあり、全部では、20冊を超えているようです。
それでも、Webページのプログラムは、動作しない箇所もあり、なかなか解決できません。試行錯誤の連続です。

文字色と背景のコントラスト

さて、本題に入ります。
文字と背景色は、Webページ作りでは、重要な要素です。背景の色が濃かったり、背景に画像を用いたりして、文字とのコントラストが少ない場合などは、読むのに苦労し、2度と読みたいと考えません。

適切なコントラストとして、2000年4月26日に公開されている、W3C草案によれば、次の計算式を参考にすると、よいらしい。
法則 38-1   明度差を求める計算式  明度差:125以上

それぞれの色のRGB値を0~255の10進数にして次式で計算。
2色の差を求め、結果が「125」以上なら基準を満たす。 最大値は255。

計算式:{(Rx299)+(Gx587)+(Bx114)}÷1000

計算例:
黄色(#ffff00=255.255.0)と水色(#00ffff=0.255.255)を比較
黄色{(255x299)+(255x587)+(0x114)÷1000 =225.93
水色{(0x299)+(255x587)+(255x114)÷1000 =178.755
225.93-178.755=47.175   明度差:基準値125を下回る
法則 38-2   色の差を求める計算式  色の差:500以上

比較する色1と色2のRGB値を0~255の10進数にして、R1、R2、 G1、G2、B1、B2として代入する。 max は2つの値の大きいほうを、min は2つの値の小さいほうを返す関数である。
この計算式では、R、G、Bそれぞれの差を求め、3つの差を全て加算する。
結果が、「500」以上なら基準を満たす。最大値は765。次式で計算。

計算式: {max(R1,R2)-min(R1,R2)}+{max(G1,G2)-min(G1,G2)}+{max(B1,B2)-min(B1,B2)}

計算例:
黄色(#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を満たす

実際の計算例

文字色:黒 #000000,rgb(0,0,0)
背景色:金 #ffd700,rgb(255,215,0)
明度差
文字色:{(0x299)+(0x587)+(0x114)}/1000=0
背景色:{(255x299)+(215x587)+(0x114)}/1000=202.45
明度差:0-202.45=202.45  基準値125を満たす○
色の差
{max(0,255)-min(0,255)}+{max(0,215)-min(0,215)}+{max(0,0)-min(0,0)}
={255-0}+{215-0}+{0-0}=255+215+0=470
色の差:470  基準値500に足りない×

文字色:黒 #000000,rgb(0,0,0)
背景色:薄黄 #ffffaa,rgb(255,255,170)
明度差
文字色:{(0x299)+(0x587)+(0x114)}/1000=0
背景色:{(255x299)+(255x587)+(170x114)}/1000=245.31
明度差:0-245.31=245.31  基準値125を満たす○
色の差
{max(0,255)-min(0,255)}+{max(0,255)-min(0,255)}+{max(0,170)-min(0,170)}
={255-0}+{255-0}+{170-0}=255+255+170=680
色の差:680  基準値500を満たす○

文字色:navy #000080,rgb(0,0,128)
背景色:薄茶 #ffddaa,rgb(255,221,170)
明度差
文字色:{(0x299)+(0x587)+(128x114)}/1000=14.592
背景色:{(255x299)+(221x587)+(170x114)}/1000=225.352
明度差:14.592-225.352=210.76  基準値125を満たす○
色の差
{max(0,255)-min(0,255)}+{max(0,221)-min(0,221)}+{max(128,170)-min(128,170)}
={255-0}+{221-0}+{170-128}=255+221+42=518
色の差:518  基準値500を満たす○


面倒な計算です。適当にWebページを作ってはいけませんと言う教訓ですね!!