CSS Function

forced-colors

The forced-colors media feature detects when the user agent enforces a limited color palette, such as Windows High Contrast mode.

Syntax

@media (forced-colors: none | active)

Parameters

Name	Type	Required	Description
none	keyword	No	No forced color palette is active (default)
active	keyword	No	A forced color palette is in effect

Examples

Add visible borders

Adds borders using system colors for visibility in forced-colors mode.

css

@media (forced-colors: active) {
  .card {
    border: 1px solid ButtonText;
  }
  .badge {
    outline: 1px solid;
  }
}

Preserve decorative images

Opt specific elements out of forced-colors adjustments.

css

@media (forced-colors: active) {
  .hero-bg {
    forced-color-adjust: none;
  }
}

Browser Support

✓

Chrome

v89++

✓

Firefox

v89++

✓

Safari

v16++

✓

Edge

v79++

✓

Opera

v75++

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

No built-in variant. Use @media (forced-colors: active) in Tailwind v4 CSS or custom variant plugin

Frequently Asked Questions

Which system colors are available in forced-colors mode?▼

Canvas, CanvasText, LinkText, VisitedText, ActiveText, ButtonFace, ButtonText, Field, FieldText, Highlight, HighlightText, SelectedItem, SelectedItemText, Mark, MarkText, GrayText.

Should I test forced-colors mode?▼

Yes. In Edge/Chrome DevTools, use Rendering > Emulate CSS media feature forced-colors. In Firefox, set ui.systemUsesDarkTheme in about:config.

Explore CSS Color Tools

Try our free tools to work with forced-colors and other CSS color functions.

Open Tools