ウェブの色域
先月のインディーウェブカーニバルにこそふさわしかったであろう話題。遅ればせながら、うちのウェブサイトの一部の色を「Rec.2020」に対応させた。Rec.2020についてここでは詳しく述べないが、色彩だけを問題にするとして、導入するとウェブのデフォルトであるsRGBに比べて色域が広くなり、端的にいえばより色鮮やかに見える。
きっかけは、うちのサイトのダークモードの発色が気になったこと。前景色のシアンが、sRGB環境でならむろん問題ないものの、HDRディスプレーのような広色域環境では相対的にやや淡く見えてしまう。とはいえサイト内の色彩には一貫性があり、それはそれでそういうものだと合点できる。ところが、iOS上ではそうも言っていられない。
iOS18のSafariでうちのサイトを開き、さらに別のアプリを起動したとする。その状態でアプリスイッチャー（起動中のすべてのアプリがカード状に並ぶアレ）を呼び出す。すると当然、アプリの一覧には先のSafariがあり、その画面にはうちのサイトが表示されている。しかしよく見ると、彩度が本来よりも妙に高い。Safariをアクティブにすると、本来の彩度に戻る。
つまりこのアプリスイッチャーは、サイトを（実際には裏側のすべてのアプリの画面を）より高彩度に、いちいち本来の色味を変えて表示するのだ。なぜこんな嫌味かつ冒涜的なまねをするのか。意図してsRGBの色域を選ぶデザイナーだっているだろうに。特段見やすくなるでもなし、自然の陰影を模してただ明度を変化させるのとは次元が違う。とにかくそんな具合だから、「本来の彩度」もあらかじめ相応に上げておかねば見苦しい。
これが、うちのサイトにRec.2020を導入したのっぴきならない理由。なお、指定できる色域の定義にはいろいろあり、iPhoneなどがいち早く対応した経緯から「Display P3」を採用しているサイトも多いようだ。しかし現時点では、より広色域かつITU-R勧告として普及しているRec.2020を選ぶのが妥当だと思う。個人的には動画制作フローとの統一性も利点。いずれにしても導入するには、CSSのColor関数を用いる。
注意点もいくつかある。第一に、Color関数はあくまでCSSの機能であること。HTMLやマニフェストに直に記すたぐいの色指定には使えず、したがってサイトに関するすべてを広色域に統一することは今のところできない。第二に、画像や動画を使っているなら、それらも広色域でないと釣り合わないおそれがあること。第三に、広色域に関するブラウザーの実装が未だ流動的っぽいこと。