inverted-colors media query | Frontend Practical Guide

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

Overview

The inverted-colors CSS media query sets styles based on whether the user has inverted all colors, such as with mobile accessibility settings.

Feature	Desktop				Mobile
Feature	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)

CSS

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

CSS Normaldisplay demo.

CSS Flip time. auxpositive demo.

CSS Textcomparison demo.

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.

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.