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

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

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

【B】の画像がくすんだ色で表示されるわけ

 2枚の画像の色空間は、【A】がsRGB、【B】がNTSCとなっており、sRGBの環境で表示を比較している。sRGBは、プリンタやモニタなどの色の扱いを統一するため、IEC(国際電気標準会議)によって策定された色空間の標準規格だ。現在では、多くの機器やアプリケーションがsRGBを標準の色空間として採用しており、CSSの標準規格においても、「CSSで指定する色はsRGB色空間で扱う」と定義されている。

 一方、NTSCはテレビ信号の規格だ。sRGBとNTSCの色空間を比較すると次のようになっており、NTSCの方が扱える色の範囲が広いことがわかる。そのため、カラーマネジメントを行わずにNTSCの画像をsRGBの環境で表示すると、すべての色を再現できずに色がくすんでしまうことになる。

CIE色度図にsRGBとNTSCの色の範囲を大まかにプロットしたもの。CIE色度図は人間が見ることのできる色の範囲を図示したもので、媒体ごとの色の範囲を簡単に比較することができる。 CIE色度図にsRGBとNTSCの色の範囲を大まかにプロットしたもの。CIE色度図は人間が見ることのできる色の範囲を図示したもので、媒体ごとの色の範囲を簡単に比較することができる。

カラーマネジメントの仕組みとカラープロファイル

 カラーマネジメントを行った場合、オリジナル環境での見た目の色が変わらないように色空間の変換処理が実行される。このとき利用されるのが画像に埋め込んだ色情報で、この情報は「カラープロファイル」と呼ばれている。

 ただし、変換処理を適切に行うためには、画像に埋め込んだ色情報だけでなく、画像を表示する出力環境の色情報も必要となる。Webブラウザで表示を確認する場合、出力環境はモニタとなるため、モニタのカラープロファイルを設定しなければならない。より正確に色を再現するためには、定期的にモニタのキャリブレーションを行うことも重要だ。

 なお、Firefox 3ではabout:configのgfx.color_management.display_profileで出力に使用するカラープロファイルを指定することもできる。MozillaZineによると、gfx.color_management.display_profileを指定しなかった場合はOSの設定を、それもない場合には標準のsRGBのカラープロファイルが使用されることになっている。

CSS 3におけるカラーマネジメント

 CSSで指定した色の標準の色空間はsRGBと定義されているが、CSS 3の勧告候補CSS3 Color Moduleでは、color-profileプロパティで任意のカラープロファイルを指定できるようになっている。

 現在のところ、FirefoxやSafariはcolor-profileプロパティをサポートしていないものの、対応すればWebページの色空間を細かく指定できるようになるだろう。sRGBより多くの色を扱えるデジタルカメラやプリンタも増えてきており、Internet ExplorerやOperaも含めて、今後のサポートに期待したい。

記事の感想やご意見をコメントでお寄せください(CNET_IDログインが必要です)
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ