W-0040 Web セーフカラーの嘘

16bit カラー環境では、全然セーフじゃない！

Web セーフカラーとは

現在のパソコンでは、色を赤・緑・青の光の3原色（ RGB ）をそれぞれ256階調で表現して、16,777,216（＝ 256³ ）色（ 2²⁴ 色： 24bit フルカラー）を扱うのが一般的です。非力な環境ではこれら全ての色を同時に表示することができないため、任意の256色だけをパレットに拾い出して画面表示を行い、これを 256 色環境と呼ぶ（ 2⁸ ＝256なので 8bit 環境とも呼ぶ）のですが、 8bit 環境ではマシン・ OS によって表示可能な色に違いや制限があります。どんなマシンが接続するかわからない Web においてどのマシンでも共通に表示できる標準的なパレット、それが Web セーフカラーと呼ばれる一連の色です。

PageTop

色のモノサシが違う

Web セーフカラーを使えば本当にどんな環境でも問題なく表示できるのかというと、実はそうでもありません。少ない色数で作った画像は、より多くの色を表示できる環境でなら問題なく表示できる。そして Web セーフカラーは、異なるマシンでも同じように見える。だから Web セーフカラーならどんな環境でも「安全」だ……と言いたいところですが、実はここには落とし穴があります。確かに 24bit 環境では 8bit 環境とそっくりそのまま同じ色が表示されますが、 16bit ハイカラー環境だけは、他の環境で作った画像を絶対に正しく表示できないのです。

16bit カラーでは 2¹⁶ ＝65,536色の色を表現できますが、これは 24bit カラーから一部の色を取り出しているのではありません。 16bit カラーでは RGB 各色をそれぞれ32・ 64 ・32階調で表現して65,536色を得ています。ところが、 8bit カラーや 24bit カラーで用いている RGB それぞれの「明」と「暗」の間を256等分した（後、3つを掛け合わせた色の）モノサシと、 16bit カラーの32等分・64等分した（後、3つを掛け合わせた色の）モノサシでは、目盛りが一致するところが（ゼロと最大値以外）ないのです。これではどう頑張っても 24bit や 8bit とは違う色しか表示できません。

PageTop

色がズレる

背景色と画像の色を Web セーフカラーで同じ色にしても、 16bit 環境では往々にしてそれぞれの色が違って見えます。画像を作る段階ではキッチリ合わせたはずなのに、ブラウザ上では色がズレる……これが Web セーフカラーを使っていても起こる、 16bit 環境での問題の代表です。

Windows などは OS 自体が色のデータを 24bit や 8bit のパレットで管理しているので、 16bit で画面表示を行おうと思ったら、前述した「階調の目盛りのズレ」を近い値に丸め込む必要があります。ところが、何故かブラウザは bgcolor 属性や CSS の background-color で指定された色の数値と、画像で使われている色を、それぞれ別々の値に丸め込んでしまうのです。背景色と画像で色がズレてしまうのはこのためで、こればかりはページ制作者にはどうにもできません。

※ ただ、全ての色でこのようになるわけでもありません。 Web セーフカラーの中にはたった22色だけ、この「色のズレ」が発生しない色があります。

※ 16bit 環境でなくても画像が違う色に表示される場合がありますが、それは、 JPEG や PNG などの画像に埋め込まれたガンマ値が適切でないからです。適切なガンマ値を指定するか、或いはガンマ埋め込みなしで画像を作れば問題ありません。

PageTop

どうすればいいか

解決策としては、背景に、背景色と同じ色の 1×1 の画像を指定するというものがあります。数値で指定した色と画像の色がズレるなら、これなら画像が背景から浮いて見えるようなこともありません。ただ、この方法だと CSS の background-attachment プロパティを利用した画像配置テクニックなどが使えなくなります。デザインに凝りたい人には痛い問題でしょう。

もう少し工夫して、透過 GIF ・ PNG を使うという方法もあります。「ズレる色」を透過色にしてしまうわけですね。写真やグラデーションなどの画像だとファイルサイズが大きくなってしまうのが難点です。

16bit 環境を無視するという選択肢もあります。 16bit 環境で上記のような色のズレが発生するのは明らかに OS あるいはブラウザのバグですし、背景色と画像の色が正常に同じ数値に丸め込まれてさえいれば違和感は感じないはずです。

究極の選択肢として、色の類を指定しないというのもアリでしょう。これなら何も問題は起こりません。当然、画面は淋しくなりますが。

何にしても、全ての環境に完全に対応できるような方法は無いと言っていいです。 16bit 環境に限らず、液晶モニタに多い「実際は数万色しか表示できないものを、擬似的にフルカラーに見せている」というケースでもこういった問題は起こりうるでしょう。 Web では閲覧者の環境がどんなものなのかわからない、 Web で「どの環境でも完璧に同じ」は不可能であるということは、常に心にとめておくべきです。

PageTop

Back