Crome と Firefox での色の違い

私がよく使っているブラウザは、Google Crome です。

理由は軽くて使いやすいからなのですが、先日私が作成しているサイトを Firefox で見たら、全く違う色で見えていることに気が付きました。

Google Crome での色表示

Google Crome での表示色

Firefox での表示色

Firefox での表示色

画面キャプチャーしたものを縮小しているので、変化が分かりにくくなっていますが、Firefoxの方が鮮やかな色で表示されていませんか？
それとも、あまり違いがハッキリわかりませんか？

私が普段使用しているモニターでは、サイト全体の見た目の印象が全く別物でした。

因みに IE は Firefox とほぼ同じ見え方でした。

 

なぜ色が違って見えるのか？

ググっていて、ある記事が目にとまりました。

普通のsRGB対応のモニターでしたらそんなことは起きないんですが、Windows環境でAdobe RGB広色域対応のモニターで起こる現象です。

出典 ： Firefoxのカラーマネージメント

私が利用しているモニターは、EIZO FlexScan SX2462W というモデルで、調べてみたところ 「Adobe RGBカバー率98％ ・・・従来のsRGB色域では再現できなかった鮮やかなグリーンやシアン色が表現可能・・・」などと書いてあり、「Adobe RGB広色域対応のモニター」でした。

なるほど！
と少し納得したところで、サブディスプレイとして使っている EIZO GAWIN M-10 (2001年発売) で表示してみたところ、確かに色が殆ど同じに見える！　どちらも、Google Crome で表示されている色とほぼ同じになりました。

つまり、違いが表現されるモニターでは違って見えるということなので、上で示した Crome と Firefox の画像の色の違いも、普通のモニターで見ている方は、殆ど同じに見えているのかもしれませんね～。

 

正しい色はどちら？

さて、本題の、どちらが正しい色なのか？

ですが、Webサイトを見る色としては、どうやら Google Crome の方が正解の様です。
Crome は、バージョン61 からデフォルトで sRGB (standard RGB) という色空間の標準規格に合わせて表示されるようになったそうです。

Firefox は、設定で sRGB に変えられることが分かりました。

Firefox で sRGB 表示に切り替える方法

  1. Firefoxのアドレス欄に「about:config」と入力してエンター
  2. 「動作保証外になります！」のメッセージで、「最新の注意を払って使用する」をクリック
  3. アドレス欄の下の検索窓に「gfx.color_management」と入力
  4. ４行出てくるので、
    ２行目「gfx.color_management.enablev4」を、「true」にする
    ３行目「gfx.color_management.mode」を、「１」にする
  5. Firefox を終了して再起動する

以上の操作で、sRGB で表示される様になります。

因みに戻す時には、上記４の部分で、２行目を「false」に、３行目を「2」にすると、初期設定値に戻ります。

おわりに

広帯域で色を表示出来るモニターを使っている人も、普通のモニターを使っている人も、どちらも同じ色に見える様にするための規格が、sRGB という事みたいですね。

今回色々調べているうちに、モニター本体の設定項目に「sRGB モード」がることに気が付きました。　というか sRGB 自体が何なのかも知らずに使っていたので、設定のしようか無いですね(^^;　モニターの設定を sRGB に切り替えてみたところ、Crome と Firefox（デフォルト設定） の色の違いは僅差になりました。

Ｗindows は、色に関して相当遅れてるそうで、自分で設定をしてあげなければいけないのですが、マックではOSのカラーマネジメント機能で色の差を可能な限り調整してあるそうなので、色の違いをあまり気にする必要はないそうです。

sRGBに関しては、Firefoxのカラーマネージメント と、カラーマネジメントモニターを、sRGB特性の表示になるよう調整する方法 あたりの記事が参考になると思います。
色域や sRGB とAdobe RGB については、ディスプレイ専門メーカーであるEIZOのこちらの記事が参考になると思います。