指定カラーのレンダリング
Last update: 2008-08-26
はじめに、Firefox 3.1alpha2pre のカラーマネージメント設定が複雑になっていることで、よくわからないと描いたが、CSS Color Module Level 3 をよく読んでみると、CSS 3 の仕様に合わせていく機能追加のように思えてきた。しかし…難しい内容で半分も分かっていないかもしれないorz
先のトピックで gfx.color_management.mode を2に設定すると、レンダリング結果が芳しくなかった定義カラーの結果が改善したと書いた。今回はこの辺りをテストしてみる。
その前に、D50 の印刷用にキャリブレーション設定したモニタプロファイルを Apple Cinema Display "23 で使用しているので、スクリーンショットの結果は皆さんの環境では異なるかもしれない。
Web Safe Color と SVG Color のテスト
グレースケール
最初は色のベースになる無彩色グループ。これが正確でなければ色全体に影響する。
上段列は Photoshop で作成して sRGB 2.1 プロファイルで Web 最適化保存した PNG ファイル。
下段列はテーブルセルの背景色を CSS で指定した。ここの結果が上段列に近かければ良好だということ。
これはブラウザはもちろん、Firefox 3.1 でも gfx.color_management.mode と ICC プロファイルやモニタキャリブレーションによって変化する。
| Images |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Live Color | cccccc | 999999 | 666666 | 333333 | 000000 |
gfx.color_management.mode を 1 に設定した時の gfx.color_management.rendering_intent の値による変化
期待する結果は Collect Color に近いこと。
| Correct Color |  |
|---|---|
| Intent=0 |  |
| Intent=1 |  |
| Intent=-1 |  |
| Intent=2 |  |
| Intent=3 |  |
gfx.color_management.mode を 2 に設定した時の gfx.color_management.rendering_intent の値による変化
期待する結果は Collect Color に近いこと。
| Correct Color | |
|---|---|
| Intent=0 |  |
| Intent=1 |  |
| Intent=-1 |  |
| Intent=2 |  |
| Intent=3 |  |
Web Safe Color
全てのカラーの実験をするわけにはいかないので、影響が分かりやすそうな色相をグループにしてみた。
上段列は Photoshop で作成して sRGB 2.1 プロファイルで Web 最適化保存した PNG ファイル。
下段列はテーブルセルの背景色を CSS で指定した。ここの結果が上段列に近かければ良好だということ。
これはブラウザはもちろん、Firefox 3.1 でも gfx.color_management.mode と ICC プロファイルやモニタキャリブレーションによって変化する。
| Images |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Live Color | ccff99 | ccff66 | 669900 | 336600 | 003300 |
gfx.color_management.mode を 1 に設定した時の gfx.color_management.rendering_intent の値による変化
期待する結果は Collect Color に近いこと。
| Correct Color |  |
|---|---|
| Intent=0 |  |
| Intent=-1 |  |
| Intent=1 |  |
| Intent=2 |  |
| Intent=3 |  |
gfx.color_management.mode を 2 に設定した時の gfx.color_management.rendering_intent の値による変化
期待する結果は Collect Color に近いこと。
| Correct Color | |
|---|---|
| Intent=0 |  |
| Intent=-1 |  |
| Intent=1 |  |
| Intent=2 |  |
| Intent=3 |  |
途中結果
Web Safe Color の結果から、gfx.color_management.rendering_intent はレンダリング結果に影響しないようなので、次の SVG Color は gfx.color_management.rendering_intent をデフォルトの0に設定し、gfx.color_management.mode の設定を変えて実験します。
SVG Color
こちらも全てのカラーの実験をするわけにはいかないので、影響が分かりやすそうな色相をグループにしてみた。
上段列は Photoshop で作成して sRGB 2.1 プロファイルで Web 最適化保存した PNG ファイル。
下段列はテーブルセルの背景色を CSS で指定した。ここの結果が上段列におよそ近かければ良好だということ。
このカラーはシステムによって結果が異なるので、Mac OS X 以外で表示している場合は参考にならないかもしれない。またモニタキャリブレーションの関係もあるので、Mac OS でも結果が異なる可能性はある。
| Images |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Live Color | 6495ed | 4169e1 | 00008b | 4b0082 | 7b68ee |
gfx.color_management.mode の値による変化
期待する結果は Collect Color におよそ近いこと。
| Correct Color |  |
|---|---|
| Mode=0 |  |
| Correct Color | |
|---|---|
| Modet=1 |  |
| Correct Color | |
|---|---|
| Mode=2 |  |
テスト結果
Mode 設定が0 (デフォルトのオフ) と2の結果は同じだということが分かった。1の結果は、以前のトピックでぼやきまくった色の正確さに欠ける点と同じことだ。カラーマネージメントを有効にしただけでは、指定カラーに影響が及んでしまう。
Web Safe Color はテスト環境下では若干明度が高いが、ほぼ満点だろう。また Safari との比較でも差は見られないので、モニタキャリブレーションとモニタ自体の性能限界かもしれない。NEC のモニタが欲しいです。
SVG カラーの正確さは、Photoshop 上で確認する色と比較した場合、微妙な差はあれどズレて表示している点は Firefox 3.1a2pre も Saafari も似たような状況だ。スクリーンショットの色を計測する限り、ブラウザ側のズレのように思うが、時間のある時にでも計測装置を使って試してみることにする。
参考に SVG カラーでの Safari との比較も下に置いておく。
| Correct Color | |
|---|---|
| Firefox | |
| Safari |  |
指定カラーとプロファイルを含んだ画像ファイル、プロファイルが埋め込まれていない画像ファイルを表示しなければならないとしたら、現在の nightly に実装されたカラーマネージメントの方法ではこの設定がベストではないかと思う。
- gfx.color_management.mode: 2 (有効且つタグを認識する)
- gfx.color_management.rendering_intent: 2 (彩度による調整)
