🎨 CSS forced-color-adjust — Complete Tutorial

The CSS forced-color-adjust property controls whether a webpage should respect or override the user’s **forced color mode** (such as Windows High Contrast Mode). It determines if your styles should be replaced by system-enforced colors for accessibility.

>>“forced-color-adjust gives developers control while ensuring accessibility for users who rely on high-contrast or forced-color modes.”

Note

✔ Essential for accessibility
✔ Helps your UI adapt correctly in high-contrast modes
✔ Should be used carefully — accessibility should remain a priority

📦 Syntax

Syntax

forced-color-adjust: auto | none;

/* Examples */
forced-color-adjust: auto; /* allow system color adjustments */
forced-color-adjust: none; /* opt out of forced colors */
ValueDescription
autoThe element adapts to forced-color mode (default)
nonePrevents system from overriding your colors

🎨 Understanding High Contrast / Forced Colors Mode

Operating systems (like Windows) provide a **Forced Colors Mode** where colors become extremely high contrast for users with low vision. The browser replaces standard colors with system-defined ones (e.g., white text on black background).

Note

Example media query:@media (forced-colors: active)

🎨 1. Default Behavior (auto)

auto

.button {
  background: #ff4757;
  color: white;
  forced-color-adjust: auto; /* let system adjust */
}

If a user enables high-contrast mode, the button will be recolored based on system rules.

🎨 2. Prevent Forced Colors (none)

none

.logo {
  forced-color-adjust: none;
}

The logo keeps its original color even in forced-color mode — useful when contrast rules would distort branding.

Note

⚠️ Use carefully: may reduce accessibility.

🎨 3. Use inside forced-colors media query

forced-colors media

@media (forced-colors: active) {
  .card {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }
}

Allows you to selectively disable or style elements specifically for high-contrast mode.

🎨 4. Example: Prevent Icons From Being Recolored

icon control

.icon {
  forced-color-adjust: none;
  fill: currentColor;
}

Prevents icons (SVGs) from being automatically recolored by forced-color mode.

🎨 5. Example: Maintain Brand Colors

brand colors

.brand-header {
  forced-color-adjust: none;
  background: #000;
  color: #fff;
}

Useful when certain UI elements must match brand identity.

🧪 Real-World Use Cases

1️⃣ Keep Brand Logos Visible

logo

img.logo {
  forced-color-adjust: none;
}

Ensures logos retain original colors.

2️⃣ Preserve Syntax Highlighting in Code Blocks

code block

pre code {
  forced-color-adjust: none;
}

Keeps code highlighting accurate in forced-color mode.

3️⃣ Allow High-Contrast Mode to Improve Buttons

accessible button

button {
  forced-color-adjust: auto;
}

Buttons adopt system high-contrast styling → better accessibility.

⚠️ Common Mistakes

  • ❌ Using none everywhere — breaks accessibility
  • ❌ Preventing forced colors for text → unreadable in contrast mode
  • ❌ Not testing UI in forced-colors mode
  • ❌ Overusing forced-color-adjust on decorative elements

Note

Rule: Use none only when absolutely necessary (logos, icons, branding).

🔥 Summary

forced-color-adjust is a crucial accessibility-aware feature that determines whether system-level high-contrast colors will override your styles.

  • auto → adapt to system colors (recommended)
  • none → prevent system adjustments (use rarely)
>>“Accessibility first — override forced colors only when it improves clarity or preserves important visuals.”