CSS Forced Colors

CSS Forced Colors

Forced colors is a display mode in which the browser limits the colors used on a page and substitutes a user-selected color palette for many author-defined colors. CSS can detect this mode with the forced-colors media feature and provide styles that remain clear and usable.

Forced color modes can help users who need particular color combinations or stronger visual contrast. Websites should generally allow the browser and operating system to apply these colors rather than trying to recreate the original design.

How Forced Colors Work

In forced color mode, the browser can replace many colors chosen by the stylesheet with a restricted palette selected by the user or operating system.

Properties such as text colors, backgrounds, borders, and other visual features may therefore appear differently from their normal CSS values.

.button {
  color: #fff;
  background-color: #0088cc;
  border: 2px solid #0088cc;
}

In a forced color mode, the browser may replace these colors so the button follows the user's selected color scheme.

This behavior is intentional. A design should not depend on its original colors remaining unchanged when forced colors are active.

The forced-colors Media Feature

The forced-colors media feature can detect whether the browser is currently using a forced color mode.

@media (forced-colors: active) {
  .button {
    border: 2px solid ButtonText;
  }
}

Styles inside the media query are applied when forced colors are active.

The media query is useful when an interface needs an adjustment because its normal visual treatment no longer communicates enough information after author colors are replaced.

The active Value

The active value indicates that forced color mode is active.

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

There is also a none value, which indicates that forced colors are not active.

@media (forced-colors: none) {
  .card {
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
  }
}

Most forced-color adjustments are written for the active condition because normal page styles already apply when forced colors are not active.

CSS System Colors

CSS system color keywords represent colors chosen by the user agent or operating system for particular interface purposes. They are useful when styling content for forced color modes.

@media (forced-colors: active) {
  .button {
    color: ButtonText;
    background-color: ButtonFace;
    border-color: ButtonText;
  }
}

System colors describe a purpose instead of specifying a fixed color such as blue, white, or black.

The actual colors represented by these keywords can vary according to the user's environment and selected color scheme.

Using currentColor

The currentColor keyword uses the computed value of an element's color property. This can help decorative features follow the text color selected by the browser.

.icon {
  color: #0088cc;
  border: 2px solid currentColor;
}

If forced color mode changes the element's text color, a border using currentColor can follow that change instead of depending on a separate fixed color.

.control {
  color: ButtonText;
  border-color: currentColor;
}

This can help keep related visual features synchronized with the color used for the element's content.

Borders and Outlines

Some interfaces rely on background colors or shadows to identify controls, cards, selected states, or focus. Those visual distinctions may change when forced colors are active.

A visible border or outline can provide an additional distinction.

@media (forced-colors: active) {
  .control {
    border: 2px solid ButtonText;
  }
}

Focus indicators should also remain visible when author colors are replaced.

.control:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

Using borders and outlines that can follow system colors helps preserve important boundaries and states.

Background Images

Forced color mode can suppress some background images, particularly when they are used only for decoration. Important information should therefore not depend entirely on a CSS background image.

.warning {
  background-image: url("warning.svg");
}

If the background image is the only indication that the content is a warning, that meaning can become difficult to identify when the image is unavailable.

Important information can instead be included as text or represented with content that does not depend solely on a CSS background.

<p class="warning"><strong>Warning:</strong> Check your information before continuing.</p>

forced-color-adjust

The forced-color-adjust property controls whether the browser is allowed to make forced-color adjustments to an element.

.example {
  forced-color-adjust: auto;
}

The default auto value allows the browser to make the appropriate forced-color adjustments.

The none value prevents those automatic adjustments for the element.

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

Using none should be approached carefully because it can override a user's chosen color requirements. It is most appropriate for limited cases where preserving specific colors is necessary for the content itself and the result remains usable in forced color mode.

Testing Forced Colors

Forced-color styles should be tested with forced colors active rather than judged only from the normal page appearance.

On systems and browsers that support forced color modes, enable the relevant operating system accessibility setting or use browser developer tools that can emulate the forced-colors media feature.

Check text, links, buttons, form controls, borders, focus indicators, selected states, icons, and other visual information needed to understand or operate the page.

Pay particular attention to interfaces that rely on background colors, shadows, gradients, or background images because those effects may be changed or removed.

Forced Colors Practices

CSS Forced Colors Example

The following example adds forced-color styles to a button and information panel. When forced colors are active, system colors provide visible text and boundaries that follow the user's selected palette.

@media (forced-colors: active) {
  .button {
    color: ButtonText;
    background-color: ButtonFace;
    border-color: ButtonText;
  }
  .panel {
    color: CanvasText;
    border-color: CanvasText;
  }
}

Open the example in the editor and enable or emulate forced colors in a supporting browser. Compare the normal appearance with the forced-color presentation and notice how the system colors replace the page's normal color scheme.