inverted-colors media query
inverted-colors は CSS のメディア特性で、ユーザーエージェントまたはその基盤となる OS が、すべての色を反転しているかどうかを検査するために使用することができます。
色の反転は、影がハイライトに変わるなど、コンテンツの読み取り性を低下させるような不快な副作用をもたらす場合があります。このメディア機能を使用すると、反転が発生しているかどうかを検出し、ユーザーの環境設定を尊重しながら、それに応じてコンテンツのスタイルを設定することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| | | 114 | 9.1 | | 10 | |
注釈 1件
実験的機能
- ブラウザの実験的フラグを有効にする必要があります
基本構文
CSS
@media (inverted-colors: inverted) {
img, video {
filter: invert(1);
}
}ライブデモ
実務での使いどころ
-
色反転環境での画像表示補正
OS設定で色が反転されている場合に、画像や動画にfilter: invert(1)を適用して正常な色で表示します。
注意点
- 2026年3月時点でSafariのみの対応です。他のブラウザでは利用できないため、必須機能としては依存しないでください。
アクセシビリティ
- 色反転ユーザーへの配慮として、画像やアイコンが反転状態で意味を失わないよう、必要に応じて補正を適用してください。