楽しいCSSの時間

program


http://www.jisc.go.jp/app/pager?id=115254

規格がきっちり存在しているとは思わなかった。
久しぶりにCSSをいじっていたら、可読性と視認性がやっぱりよく分からないので
この機会に調べ尽くしてしまおうという訳です。

背景色と前景色についての見やすさ？




そもそもJIS規格が存在していたことに驚いたのですが、結局W3Cに行き着く。
http://www.w3.org/TR/AERT

なにやら、英語が並んでますが「Guideline2」に何かすごい事が書いてありました。
具体的には、以下の部分。

Color visibility can be determined according to the following algorithm:

(This is a suggested algorithm that is still open to change.)

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula:
( (Red value X 299) + (Green value X 587) + (Blue value X 114) ) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2) ) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2) )

The rage for color brightness difference is 125. The range for color difference is 500.

「みやすさ」とは以下の手法で決定することができるそうな。
（様々な疑問はこの際置いておく。）
「輝度差」と「色差？」を計算してそれぞれ125以上500以上なら見やすいそうです。
輝度は以下の公式で求められます。
( (Red value * 299) + (Green value * 587) + (Blue value * 114) ) / 1000

その道の人ならすぐ分かるパラメータですね。
でも、それぞれの係数の導き方を知っていた人は居なかった。
私も詳しく知らないです。


あとは「色差」
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2) ) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2) )

たぶんmaximum(A,B)は大きい方を返すんでしょう。
RGB値それぞれにおいて、それぞれの大きい方から小さい方の差をとり、足しておく。




ほらまぁ、計算してみればきっとしっくりきますね。
せっかくCSSいじくって、センスのないこのページの背景色(#000000)と前景色(#ffffff)の組み合わせの悪さでも計算してみましょう。

パラメータは以下のように与えておきます。
少女計算中....



続くかも。