How to Use the CSS inverted-colors Media Query

The inverted-colors CSS media query is a user-preference feature defined in the CSS Media Queries Level 5 specification that detects whether the operating system or browser is actively inverting display colors. Users with low vision, photophobia, or other visual impairments often enable system-wide color inversion to improve readability and reduce glare. This article explains how the inverted-colors media query functions, the problem of double-inversion, and how to write CSS rules that adapt images and UI elements accordingly.

Understanding System Color Inversion

Operating systems like macOS, iOS, Windows, and Android offer accessibility features that invert every pixel rendered on the screen. While this effectively converts black text on a white background into white text on a black background, it also inverts content that shouldn't be reversed, such as photographs, videos, and full-color graphics. This transforms media into photographic negatives, significantly degrading the user experience.

Media Query Syntax and Values

The inverted-colors media feature evaluates whether the runtime environment has applied an inversion filter to the screen output. It accepts two primary values:

• none: The display colors are normal; no inversion is applied.
• inverted: The host operating system or user agent is inverting all colors.

A basic media query block looks like this:

@media (inverted-colors: inverted) {
  /* Styles applied only when color inversion is active */
}

Counteracting Inversion on Media

The primary use case for this media query is restoring images, video players, and canvas elements to their original appearance. Because the operating system inverts the final rendered frame, applying a 100% CSS inversion filter to targeted elements causes them to be inverted twice, returning them to their intended appearance for the viewer.

@media (inverted-colors: inverted) {
  img, 
  video, 
  picture, 
  canvas {
    filter: invert(100%);
  }
}

When the browser renders an image with filter: invert(100%), the operating system subsequently flips those pixels a second time, resulting in a standard, natural-looking image on the user's screen.

Preserving Icons and UI Graphics

Not all graphical assets need re-inverting. Simple monochrome icons (such as SVG UI symbols) benefit from the OS inversion because they naturally flip to high-contrast colors suited for the user's view.

To prevent breaking icons while correcting rich photos, target specific classes or attributes rather than global element tags:

@media (inverted-colors: inverted) {
  /* Re-invert only photo content */
  .photo,
  .avatar,
  .content-media {
    filter: invert(100%);
  }

  /* Leave monochrome icons and decorative borders alone */
  .icon {
    filter: none;
  }
}

Handling Shadows and Contrasts

OS-level inversion transforms soft, dark box-shadows into bright, distracting halos. You can use the media query to neutralize or remove shadows, ensuring the interface remains clean and accessible:

@media (inverted-colors: inverted) {
  .card, 
  .modal {
    box-shadow: none;
    border: 1px solid currentColor;
  }
}

Browser Support Considerations

As part of CSS Media Queries Level 5, the inverted-colors query is primarily supported in WebKit-based browsers (such as Safari on macOS and iOS). Chromium and Gecko engines have tracked implementation, but support remains limited across non-Apple platforms. Therefore, these styles should be treated as progressive enhancements to improve accessibility where supported, without relying on them for critical application logic.