color-gamut media query
color-gamut は CSS のメディア特性で、ユーザーエージェントおよび出力機器が対応している色域のおおよその範囲に基づいて CSS スタイルを適用するために使用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 58 | 79 | 110 | 10 | 58 | 10 | |
| ユーザーエージェントと出力機器が Display P3 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 P3 色域は sRGB 色域よりも広く、また sRGB 色域を含んでいます。 | 58 | 79 | 110 | 10 | 58 | 10 |
| ユーザーエージェントと出力機器がおよそ ITU-R 勧告 BT.2020 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 REC. 2020 色域は P3 色域よりも広く、またP3色域を含んでいます。 | 58 | 79 | 110 | 10 | 58 | 10 |
| ユーザーエージェントと出力機器が sRGB 色域にほぼ対応、またはそれより広い範囲に対応している場合です。大多数のカラーディスプレイはこれに含まれます。 | 58 | 79 | 110 | 10 | 58 | 10 |
注釈 1件
実装メモ
- Firefox は広色域カラーをサポートしていないため、`color-gamut: p3` は常に false になります。 バグ 1626624 を参照してください。
注釈 1件
実装メモ
- Firefox は広色域カラーをサポートしていないため、「color-gamut: rec2020」は常に false になります。 バグ 1626624 を参照してください。
注釈 1件
実装メモ
- Firefox は広色域カラーをサポートしていないため、「color-gamut: srgb」は常に true になります。 バグ 1626624 を参照してください。
基本構文
CSS
/* Use more vibrant colors on devices that support the P3 color gamut */
.brand-color {
background-color: #ff4500;
}
@media (color-gamut: p3) {
.brand-color {
background-color: oklch(65% 0.29 29);
}
}ライブデモ
実務での使いどころ
-
広色域デザイン
P3対応ディスプレイでは sRGB を超える鮮やかな色を使い、非対応デバイスではsRGBにフォールバックする。
注意点
- P3色域を前提としたデザインでは、sRGB環境でのフォールバック色を必ず用意する。
アクセシビリティ
- 広色域の色を使う場合も、テキストと背景のコントラスト比はWCAGの基準を満たすようにする。