色の指定については First step CSS の Section 2 で扱ったが,ここでは実際に色を指定するとき注意することを中心にお話ししよう。
パソコンの進歩とともに,その表示性能も飛躍的に向上した。しかしそれでも,さまざまな環境のコンピュータ(あるいは最近では携帯端末)がインターネットに接続されていて,その表示性能も多様である。
CSS の色の指定では,16 進数 6 桁または rgb 256 段階で指定した場合は 256³ で約 1677 万色,rgb パーセント指定で 0.1 ポイント刻みで指定するとすれば 1000³,実に 10 億色の指定が可能である。
“微妙な色合い”で表現したいデザインというのもあろう。しかし,表示できる色数の少ない環境では,せっかく指定した色が,システムが表示できるもっとも近い色にされてしまったり,わずかな色の違いが同じ色で表示されてしまったりということがある。
“微妙な色合いが出ればそれでよいが,そうでない場合は仕方ない”と考えるならばそれでもよいであろう。しかし,“どんな環境でも(ほぼ)正しく再現される色の指定方法”が必要ではある。
そのような色の指定法として 216 色パレットがある。この方法は赤の要素,緑の要素,青の要素をそれぞれ 6 段階,6³=216[色] を使う方法である。多少不便が生じるかもしれないが,この中から指定された色は現性が高い。
216 色パレットは,それぞれの要素を
で指定する。
ちなみに,画像を扱うソフトウェアの中には,GIF への書き出し時に 216 色パレットを使って減色処理を行うことができるものもある。
216 色パレットは,Web セーフカラーと呼ばれることもある。
実際には,“色を再現する”ことは,たいへんなことである。出力されるデバイスが表現しうる色空間,およびデバイスの特性(たとえば,モニタなら色温度,ガンマ値など)に,さらにはそれを人が見るときの環境(照明条件など)によって“同じ指定”の色でも異なって出力され,異なって知覚される。この“216 色パレット”という枠組みは,“‘数値として指定した色’を出力するときに,表示性能によって‘別の数値で指定される色’に変わってしまうことがない”ことを提供しているに過ぎない。
“色の組み合わせ”は,文書の読みやすさに大きく影響する。このことを念頭においた配色が大切なことはもちろんであるが,これを指定するときにいくつか注意すべきことがある。
たとえば,暗い色づかいの背景画像“bg-dark.gif”を使って,背景を指定する場合を考えてみよう。
BODY { background: url(bg-dark.gif); color: #FFF; }
前景色を白にして,背景に文字が映えるようにした。ここで,背景画像が読み込めなかった場合,背景はブラウザの既定の背景となる。もし,これが“白一色”であると,前景色の白で表示されているものは見ることができない。そこで,同時に背景色も指定する。たとえば,“bg-dark.gif”の全体の色調を,“#600”で代表できるものとすると,
BODY { background: url(bg-dark.gif) #600; color: #FFF; }
とすることで,万が一背景画像が読み込めなかった場合の可読性が確保されるであろう。