Limited support Useful when inverted-colors media query helps adapt the interface to user preferences, display capability, or environment conditions.

inverted-colors media query

The inverted-colors CSS media feature is used to test if the user agent or the underlying operating system has inverted all colors.

Inversion of colors can have unpleasant side effects, such as shadows turning into highlights, which can reduce the readability of the content. Using this media feature, you can detect if inversion is happening and style the content accordingly while respecting user preference.

Media queries

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.inverted-colors
114
9.1
10
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled

Syntax

CSS 
@media (inverted-colors: inverted) {
  img, video {
    filter: invert(1);
  }
}

Live demo

Normaldisplay

CSS Normaldisplay demo.

PreviewFullscreen

Flip time. auxpositive

CSS Flip time. auxpositive demo.

PreviewFullscreen

Textcomparison

CSS Textcomparison demo.

PreviewFullscreen

Use cases

  • Adaptive styling

    Use inverted-colors media query to tailor layout or presentation to device features and user settings.

  • Progressive enhancement

    Keep the default experience solid, then layer in device-specific or preference-aware improvements.

Cautions

  • Do not rely on a media condition as the only path to essential functionality.
  • Document the breakpoint or environment strategy so conditions stay consistent across the codebase.

Accessibility

  • Media-query adaptations should preserve keyboard access, reading order, and touch usability.
  • Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.

Related links