Widely available Supported across all major browsers. Safe to use in production.

Forced colors

The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.forced-colors
89
79
89
16
89
16
css.properties.forced-color-adjust

The forced-color-adjust CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.
89
79
113
89
CSS property
auto
89
79
113
89
none
89
79
113
89
preserve-parent-color
Experimental
106
106
106
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -ms-high-contrast-adjust (12)

Syntax

CSS 
@media (forced-colors: active) {
  /* Use a border to clearly define the element's boundaries */
  .card {
    border: 1px solid ButtonText;
  }

  /* Apply system colors to SVG icons */
  .icon svg {
    fill: ButtonText;
  }

  /* Use outline instead of box-shadow */
  .focused:focus {
    outline: 2px solid Highlight;
  }
}

Live demo

Normalmode

forced-colors media query Normalmode demo.

PreviewFullscreen

forcedcol-support

forced-colors media query forcedcol-support demo.

PreviewFullscreen

borderemphasis

forced-colors media query borderemphasis demo.

PreviewFullscreen

Use cases

  • Using Forced colors

    The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links