CSS forced-color-adjust Property

This property controls whether the browser can override an element's colors when the user has enabled a forced color scheme like Windows High Contrast Mode.

selector { forced-color-adjust: auto | none; }
auto The browser is permitted to override the element colors to match the system forced-colors mode.
none The browser is prohibited from overriding the element colors, keeping your CSS styles intact.

Code Examples

A basic example showing how to force an element to keep its specific branding colors regardless of system settings.

<div style="forced-color-adjust: none; background-color: #ff0000; color: #ffffff; padding: 10px;">
  This red background and white text will be preserved even if the user has High Contrast Mode turned on.
</div>

An advanced approach using a media query to only opt-out of forced colors when they are active, while using JavaScript to dynamically update colors.

<style>
  .status-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
  }
  @media (forced-colors: active) {
    .critical-ui {
      forced-color-adjust: none;
      border: 2px solid CanvasText;
    }
  }
</style>

<div id="indicator" class="status-indicator critical-ui" style="background-color: #2ecc71;"></div>

<script>
  const el = document.getElementById("indicator");
  function setStatus(isError) {
    el.style.backgroundColor = isError ? "#e74c3c" : "#2ecc71";
    console.log("Status color updated to: " + el.style.backgroundColor);
  }
  // Example: Change status after 2 seconds
  setTimeout(() => setStatus(true), 2000);
</script>

Pro Tip

Use the "forced-colors: active" media query to apply "forced-color-adjust: none" only when it is actually needed. This allows you to define a surgical strike for your styling, ensuring that you only override the system when the user is actually in a high-contrast environment, rather than applying a blanket rule that might have side effects.

Deep Dive

When a user enables forced colors at the OS level, the browser normally takes the steering wheel and replaces your color choices with a limited, high-contrast palette to ensure readability. Setting this property to "none" is like putting a "Do Not Disturb" sign on your element; it tells the browser to back off and leave your colors exactly as they are. This is useful when specific colors are functional rather than just decorative, like in a color picker or a status indicator where the specific hue carries vital meaning that the system override might destroy.

Best Practices

Only use "none" when the system's forced colors would break the logic or utility of your UI. If you do opt out, you become responsible for the accessibility of that element. You must ensure that your manual color choices still provide enough contrast for users who rely on high-contrast settings. Think of it as taking manual control of a life-support system; you better know what you are doing.

Common Pitfalls

A common mistake is using "none" on large sections of a page just to preserve branding. This defeats the purpose of the user's accessibility settings and can make your site unusable for people with visual impairments. Another trap is forgetting that this property is inherited; setting it on a parent might accidentally opt-out all child elements from high-contrast protection.

Accessibility

This property is a double-edged sword for accessibility. While it allows you to preserve essential color information, it can easily lead to WCAG violations if you aren't careful. Use the "forced-colors" media query alongside this property to detect when high-contrast mode is active and then manually provide accessible, high-contrast alternatives for the elements you've opted out of the system override.

Dev Data Table: forced-color-adjust property

default auto
animatable no
inherited yes
experimental no
year_intro 2020
year_standard 2022
js_syntax_1 element.style.forcedColorAdjust = "none";
js_syntax_2 element.style.setProperty("forced-color-adjust", "none");
js_note When manipulating this property in JavaScript, remember that it specifically targets how the browser handles system-level high contrast themes.
browsers { "Chrome": 89, "Edge": 79, "Firefox": 89, "Safari": 15.4, "Opera": 75, "Chrome Android": 89, "Safari on iOS": 15.4, "Samsung Internet": 15, "Opera Mobile": 63 }
results render here...