inverted-colors media query
モバイルのアクセシビリティ設定などで色の反転が有効になっている環境を検出するメディアクエリです。色が反転された状態で見づらくなる画像や動画に対して、二重反転を適用して正常な表示に戻すことができます。アクセシビリティ対応の一環として重要な機能です。
概要
モバイルのアクセシビリティ設定などで色の反転が有効になっている環境を検出するメディアクエリです。色が反転された状態で見づらくなる画像や動画に対して、二重反転を適用して正常な表示に戻すことができます。アクセシビリティ対応の一環として重要な機能です。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 9.1+
Firefox 未対応
モバイル
Chrome Android 未対応
Safari iOS 10+
Firefox Android 未対応
基本構文
CSS
@media (inverted-colors: inverted) {
img, video {
filter: invert(1);
}
}実務での使いどころ
-
色反転環境での画像表示補正
OS設定で色が反転されている場合に、画像や動画にfilter: invert(1)を適用して正常な色で表示します。
注意点
- 2026年3月時点でSafariのみの対応です。他のブラウザでは利用できないため、必須機能としては依存しないでください。
アクセシビリティ
- 色反転ユーザーへの配慮として、画像やアイコンが反転状態で意味を失わないよう、必要に応じて補正を適用してください。