color-gamut media query

概要

ディスプレイの色域（sRGB / P3 / Rec.2020）を検出し、広色域対応デバイスにはより鮮やかな色を提供できる。Apple製品などDisplay P3対応デバイスでは、sRGBでは表現できない鮮やかな赤や緑を表示可能。color() 関数や oklch() と組み合わせて使う。

対応ブラウザ

基本構文

/* P3色域対応デバイスでより鮮やかな色を使用 */
.brand-color {
  background-color: #ff4500;
}

@media (color-gamut: p3) {
  .brand-color {
    background-color: oklch(65% 0.29 29);
  }
}

実務での使いどころ

• 広色域デザイン

  P3対応ディスプレイでは sRGB を超える鮮やかな色を使い、非対応デバイスではsRGBにフォールバックする。

注意点

アクセシビリティ

• 広色域の色を使う場合も、テキストと背景のコントラスト比はWCAGの基準を満たすようにする。

参考リンク

• MDN Web Docs — color-gamut
• Can I use — color-gamut media query