forced-colors

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

The forced-colors media feature indicates whether or not the browser is currently in forced-colors mode.

Values

none

Forced colors mode is not active; the page's colors are not being forced into a limited palette.

active

Indicates that forced colors mode is active. The browser provides the color palette to authors through the CSS system color keywords and, if appropriate, triggers the appropriate value of prefers-color-scheme so that authors can adapt the page. The browser selects the value for prefers-color-scheme based on the lightness of the Canvas system color (see the color adjust spec for more details).

Usage notes

Properties affected by forced-color mode

In forced colors mode, the values of the following properties are treated as if they have no author-level values specified. That is, browser-specified values are used instead. The browser-specified values do not affect the style cascade; the values are instead forced by the browser at paint time.

These browser-specified values are selected from the set of system colors — this ensures a consistent contrast for common UI elements for users that have forced colors enabled.

Additionally the following properties have special behavior in forced colors mode:

The system colors that are forced for the above properties depend on the context of the element. For example the color property on button element will be forced to ButtonText. On normal text it will be forced to CanvasText. See the list of system colors for additional details of when each might be appropriate in various UI contexts.

Note: User agents choose system colors based on native element semantics, not on added ARIA roles. As an example, adding role="button" to a div will not cause an element's color to be forced to ButtonText

In addition to these adjustments, browsers will help ensure text legibility by drawing "backplates" behind text. This is particularly important for preserving contrast when text is placed on top of images.

There are two cases where the user agent does not force the values for the above properties — when a forced-color-adjust value of none is applied to an element, or when a system color is specified by the author.

When forced-color-adjust is set to none on an element, none of the forced color values will apply, and author styles will be applied as normal. Additionally, the backplate for text will be disabled.

When a system color is specified, it will be used instead of the value that would otherwise have been forced.

You can also use system colors with any property other than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode.

Accessibility concerns

In general, web authors should not be using the forced-colors media feature to create a separate design for users with this feature enabled. Instead, its intended usage is to make small tweaks to improve usability or legibility when the default application of forced colors does not work well for a given portion of a page.

The high contrast provided by forced colors mode's reduced palette and text backplates is often essential for some users to be able to read or use a given website, so adjustments that affect content should be chosen carefully and targeted to content that is otherwise not legible.

User preferences

This media feature is active only if the user has enabled color scheme preferences in their operating system. One example of such a feature is High Contrast mode on Windows.

Examples

Note: The below example will only work when using a browser that supports this media feature, and with a preference such as High Contrast mode enabled in your OS.

This example is a button that normally gets its contrast via box-shadow. Under forced colors mode, box-shadow is forced to none, so the example uses the forced-colors media feature to ensure there is a border of the appropriate color (ButtonText in this case)

HTML

html
<button class="button">Press me!</button>

CSS

css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
    border: 2px ButtonText solid;
  }
}

Result

Specifications

Specification
Media Queries Level 5
# forced-colors

Browser compatibility

BCD tables only load in the browser

See also