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

面白そうなＸＨＭＴＬの解説書を入手した。
今までの参考書には記してない箇所もあり、それでも２０００年に決められた規格だった。 早速、プログラムを作って楽しんだ。

参考書・詳細

Ｗｅｂ標準ＸＨＴＭＬ＋デザイン
クリエイターが身につけておくべき
新・１００の法則
発行：株式会社インプレスジャパン
定価：本体２，２００円＋税

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

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

適切なコントラストとして、２０００年４月２６日に公開されている、Ｗ３Ｃ草案によれば、次の計算式を参考にすると、よいらしい。

法則 ３８－１   明度差を求める計算式  明度差：１２５以上

それぞれの色のＲＧＢ値を０～２５５の１０進数にして次式で計算。
２色の差を求め、結果が「１２５」以上なら基準を満たす。 最大値は２５５。

計算式：｛（Ｒｘ２９９）＋（Ｇｘ５８７）＋（Ｂｘ１１４）｝÷１０００

計算例：
黄色（#ffff00=255.255.0）と水色（#00ffff=0.255.255）を比較
黄色｛（２５５ｘ２９９）＋（２５５ｘ５８７）＋（０ｘ１１４）÷１０００ ＝２２５．９３
水色｛（０ｘ２９９）＋（２５５ｘ５８７）＋（２５５ｘ１１４）÷１０００ ＝１７８．７５５
２２５．９３－１７８．７５５＝４７．１７５   明度差：基準値１２５を下回る

法則 ３８－２   色の差を求める計算式  色の差：５００以上

比較する色１と色２のＲＧＢ値を０～２５５の１０進数にして、Ｒ１、Ｒ２、 Ｇ１、Ｇ２、Ｂ１、Ｂ２として代入する。 max は２つの値の大きいほうを、min は２つの値の小さいほうを返す関数である。
この計算式では、Ｒ、Ｇ、Ｂそれぞれの差を求め、３つの差を全て加算する。
結果が、「５００」以上なら基準を満たす。最大値は７６５。次式で計算。

計算式： {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 色の差：基準値５００を満たす

文字色：黒　#000000,rgb(0,0,0)
背景色：金　#ffd700,rgb(255,215,0)

明度差

文字色：{(0x299)+(0x587)+(0x114)}/1000=0
背景色：{(255x299)+(215x587)+(0x114)}/1000=202.45
明度差：０－２０２．４５＝２０２．４５  基準値１２５を満たす○

色の差

{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
色の差：４７０  基準値５００に足りない×

文字色：黒　#000000,rgb(0,0,0)
背景色：薄黄　#ffffaa,rgb(255,255,170)

明度差

文字色：{(0x299)+(0x587)+(0x114)}/1000=0
背景色：{(255x299)+(255x587)+(170x114)}/1000=245.31
明度差：０－２４５．３１＝２４５．３１  基準値１２５を満たす○

色の差

{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
色の差：６８０  基準値５００を満たす○

文字色：navy　#000080,rgb(0,0,128)
背景色：薄茶　#ffddaa,rgb(255,221,170)

明度差

文字色：{(0x299)+(0x587)+(128x114)}/1000=14.592
背景色：{(255x299)+(221x587)+(170x114)}/1000=225.352
明度差：１４．５９２－２２５．３５２＝２１０．７６  基準値１２５を満たす○

色の差

{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
色の差：５１８  基準値５００を満たす○