ブラウザのカラーマネジメント:FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008/02/08 17:00

Webデザインで常に意識しておきたい「色」。今回はブラウザとカラーマネジメントの関係について説明しよう。

カラーマネジメントのサポート

 これまで、Safariを除く主要なブラウザカラーマネジメントをサポートしておらず、制作者が意図した色で画像を見てもらうことができないという問題があった。しかし、Firefox 3がカラーマネジメントをサポートしたことにより、Webブラウザにおける色の再現性が一歩前進したと言えるだろう。

 ただし、SafariFirefox 3も、現状では画像に埋め込まれた色の情報を読み込んで表示に反映することはできるが、スタイルシートでカラーマネジメントに関する情報を指定する機能には対応していない。

カラーマネジメントと画像の表示

 色を扱う環境はデジタルカメラやプリンタ、モニタなどさまざまで、環境によって扱える色の範囲(色空間)に違いがある。そのため、異なる環境の間でそのままデータのやりとりを行うと、同じデータでも環境によって見た目の色が変わってしまうという問題が発生する。この問題を回避して、どの環境においても同じ色を再現するための技術が、カラーマネジメントだ。

 たとえば、次の2枚の画像は色空間が異なる環境で作成し、画像にその情報を埋め込んである。その情報を元に、各画像をそれぞれの色空間で表示した場合にのみ、同じ色で見えるようになっている。

【A】 【A】
【B】 【B】

 カラーマネジメントに対応していないInternet Explorerなどのブラウザでは、画像中の色情報を認識せず、【B】の画像は少しくすんだ色で表示される。

Internet Explorerの表示 Internet Explorerの表示

 一方、カラーマネジメントに対応したFirefox 3やSafariでは、画像中の色情報を認識して、【A】と【B】は同じ色で表示される。

Firefox 3の表示 Firefox 3の表示
Safariの表示 Safariの表示

 なお、Firefox 3で【A】と【B】の画像が同じ色で表示されない場合は、カラーマネジメントの機能が無効になっていると考えられる。URLを入力するロケーションバーにabout:configと入力して、gfx.color_management.enabled をtrueに設定して再起動すると、有効にすることができる。

  • コメント(1件)

#1 anonymous  - 2009/11/25 19:06

とても参考になりました。 コーダーやってますが、デザイナーからの元データに泣かされいろいろ調べておりました。 この手の「ややこし... 続きを見る
» 不適切なコメントを報告する
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文(必須) :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ