Adds the 'forced-colors' media feature, which 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. Adds the 'forced-color-adjust' property, which allows authors to opt particular elements out of forced colors mode, restoring full control over the colors to CSS.

Motivation

The High Contrast Windows accessibility feature[1] was first introduced to increase the readability of text through color contrast. The goal of High Contrast is to ensure a certain level of contrast between foreground and background colors. One common problem arises with background images. If text lies atop an image, altering the color of the text in High Contrast will not guarantee its readability. One option would be to override images to allow text readability. This solution, however, is not an ideal one, as it can alter the context of a webpage for users under High Contrast. The 'forced-colors' media feature and 'forced-color-adjust' property allow web developers to detect the presence of features such as High Contrast and adjust their content accordingly. For extended background on motivations, please refer to the explainer. [1] https://docs.microsoft.com/en-us/windows/desktop/w8cookbook/high-contrast-mode

Specification

Editor's draft

Status in Chromium

Blink>CSS


Enabled by default (tracking bug) in:

  • Chrome for desktop release 89

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Intent to Prototype url

Intent to Prototype thread

Search tags

css, forced, colors, forced-colors, forced-color-adjust,

Last updated on 2021-01-26