CSS inverted-colors Media Feature

Definition and Usage

The inverted-colors media feature tests whether the user agent or OS has inverted all colors in the displayed area.

Use @media (inverted-colors: inverted) to adapt when inversion is on (for example iOS Smart Invert), and @media (inverted-colors: none) when colors are normal. Inversion can turn shadows into highlights and hurt readability — this query lets you soften those side effects while respecting the user’s setting.

CSS Syntax

Always wrap the feature in parentheses. Invalid forms like @media inverted-colors(inverted) do not work.

Feature Values

How to Use inverted-colors

Keep normal styles solid, then enhance when inversion is detected.

1. Write readable defaults with good contrast (no media query required).
2. Add @media (inverted-colors: inverted) for inversion-aware tweaks.
3. Reduce heavy shadows/gradients that become harsh after invert.
4. Optionally protect photos with filter: invert(1) so they look correct after the OS invert.

Live Preview

Reports what matchMedia returns on this browser. On Chrome/Firefox you will often see no support; Safari with Smart Invert can match inverted.

CSS Examples

Each snippet focuses on inverted-colors. View Output shows the intended look; many desktop browsers will not match — use Try It Yourself and Safari when possible.

p {
  color: #64748b;
}

@media (inverted-colors: inverted) {
  p {
    background: #000;
    color: #ff0;
    text-decoration: overline;
  }
}

p {
  color: #334155;
}

@media (inverted-colors: none) {
  p {
    color: #dc2626;
  }
}

img {
  max-width: 200px;
}

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

Key Takeaways