CSS inverted-colors Media Feature

What You’ll Learn

The inverted-colors media feature detects when the OS inverts page colors for accessibility. Adapt styles for high-contrast inverted displays.

Introduction

Some users enable system color inversion for better readability — for example iOS Smart Invert or classic invert accessibility settings. When active, the browser or OS flips light and dark colors across the screen.

The @media (inverted-colors) feature lets you detect this setting and adjust your CSS so content remains clear, images don’t look broken, and contrast stays usable.

Definition and Usage

Write @media (inverted-colors: inverted) for inverted mode, or @media (inverted-colors: none) for normal colors. Use these queries to simplify gradients, strengthen borders, and fix media that inverts poorly.

📝 Syntax

Use inverted or none inside an @media rule:

/* System color inversion is active */
@media (inverted-colors: inverted) {
  /* Adapt for inverted display */
}

/* Normal color display */
@media (inverted-colors: none) {
  /* Standard styles */
}

Accepted Values

• inverted — The user agent or OS is inverting page colors (accessibility inversion active).
• none — Colors display normally with no system inversion applied (default for most users).

inverted-colors vs prefers-color-scheme

Basic Example

@media (inverted-colors: inverted) {
  body {
    background-color: #0f172a;
    color: #f8fafc;
  }
}

@media (inverted-colors: none) {
  body {
    background-color: #fff;
    color: #1e293b;
  }
}

Default Value

The default is effectively none — colors display normally unless the user enables system inversion.

Syntax Rules

• Use explicit values: inverted or none (no boolean shorthand).
• Treat as progressive enhancement — most users will match none.
• Avoid fighting the OS inversion with conflicting background overrides.
• Simplify gradients and shadows when inverted matches.
• Pair with semantic HTML and WCAG contrast for baseline accessibility.

Related Topics

• color media feature — detect color bit depth
• color-gamut — display color range
• hover — primary input hover capability

When to Use inverted-colors

Reach for inverted-colors when system inversion affects readability:

• Accessibility support — Help users who rely on inverted color modes.
• Fix broken images — Swap or hide photos that invert poorly.
• Simplify gradients — Replace complex gradients with flat colors when inverted.
• Strengthen borders — Add visible outlines so UI boundaries stay clear.
• Remove decorative shadows — Shadows may look odd after color inversion.

Examples Gallery

Practice inverted-colors with page themes, image handling, card simplification, and comparisons to dark mode.

@media (inverted-colors: inverted) {
  body {
    background-color: #0f172a;
    color: #f8fafc;
  }
}

@media (inverted-colors: none) {
  body {
    background-color: #fff;
    color: #1e293b;
  }
}

.hero-photo {
  max-width: 100%;
  border-radius: 0.5rem;
}

.hero-placeholder {
  display: none;
  padding: 2rem;
  background: #1e293b;
  color: #f8fafc;
  border-radius: 0.5rem;
  text-align: center;
}

@media (inverted-colors: inverted) {
  .hero-photo {
    display: none;
  }
  .hero-placeholder {
    display: block;
  }
}

.card {
  padding: 1rem;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

@media (inverted-colors: inverted) {
  .card {
    background: #1e293b;
    border: 2px solid #f8fafc;
    box-shadow: none;
    color: #f8fafc;
  }
}

/* User prefers dark theme */
@media (prefers-color-scheme: dark) {
  body {
    background: #1e293b;
    color: #f1f5f9;
  }
}

/* System color inversion active */
@media (inverted-colors: inverted) {
  .decorative-bg {
    background-image: none;
  }
  a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

💬 Usage Tips

• Progressive enhancement — Base design should work without inverted-colors rules.
• Test on Safari iOS — Enable Smart Invert in Accessibility settings.
• Simplify visuals — Flat colors beat complex gradients when inverted.
• Keep link underlines — Strengthen link affordance in inverted mode.
• Don’t rely on color alone — Use icons, labels, and borders too.

⚠️ Common Pitfalls

• Confusing with dark mode — inverted-colors ≠ prefers-color-scheme: dark.
• Assuming wide support — Limited browser support; always provide fallbacks.
• Fighting the OS — Avoid colors that double-invert into unreadable results.
• Hiding all images — Only replace images that truly break; keep meaningful ones.
• Using filter: invert() — CSS filter inversion is different from this media feature.

♿ Accessibility

• Respect user settings — Users enable inversion for vision needs; don’t override it.
• WCAG contrast — Maintain 4.5:1 text contrast in both modes.
• Focus indicators — Keep visible focus rings in inverted mode.
• Semantic HTML — Headings, labels, and landmarks help all users.
• Test with real settings — Enable system inversion on a phone or Mac to verify.

💡 Best Practices