CSS Color Adjustment Module Level 1

1. Introduction

This specification introduces three new features related to controlling how/when colors are auto-adjusted by the user agent:

• Color schemes and the color-scheme property, which controls whether or not browser-provided parts of the page’s UI respect the user’s chosen color scheme.

• Forced colors mode and the forced-color-adjust property, which controls whether or not forced colors mode is allowed to apply to a given element.

• The print-color-adjust property, which controls whether the browser is allowed to automatically adjust colors to the user’s assumed performance preferences, such as suppressing background colors when printing to save ink.

Together with the prefers-color-scheme, prefers-contrast, and forced-colors media queries [MEDIAQUERIES-5], this module allows color scheme negotiation between the author and the user.

1.1. Value Definitions

This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

2. Preferred Color Schemes

Operating systems and user agents often give users the ability to choose their preferred color scheme for user interface elements. This color scheme is typically reflected in the user agent’s rendering of its navigation interface as well as in-page interface elements such as form controls and scrollbars.

A UA can also allow the user to indicate a preference for the color scheme of the pages they view, requesting that the author adapt the page to those color preferences. (It is not required to express such a preference; users can have preferences for operating system interface colors that they do not want imposed on pages.)

The most common color scheme preferences are:

• A light color scheme ("day mode") consists of light background colors and dark foreground/text colors.

• A dark color scheme ("night mode") consists of the opposite, with dark background colors and light foreground/text colors.

The light and dark color schemes don’t represent an exact color palette (such as black-and-white), but a range of possible palettes. To guarantee specific colors, authors must specify those colors themselves. Note also that, consequently, pairing default or <system-color> colors with author-specified colors cannot guarantee any particular contrast level; it might be necessary to set both foreground and background colors together to ensure legibility [WCAG21].

To enable pages to adapt to the user’s preferred color scheme, user agents will match the prefers-color-scheme media query to the user’s preferred color scheme. [MEDIAQUERIES-5] Complementing this, the color-scheme property defined here lets the author indicate appropriate color schemes for UA-provided UI and colors in the page.

User agents may support additional color schemes, however CSS does not support negotiation of additional color schemes: user agents should pursue standardization of these schemes, so that prefers-color-scheme and color-scheme can reflect the additional values.

2.1. Opting Into a Preferred Color Scheme: the color-scheme property

While the prefers-color-scheme media feature allows an author to adapt the page’s colors to the user’s preferred color scheme, many parts of the page are not under the author’s control (such as form controls, scrollbars, etc). The color-scheme property allows an element to indicate which color schemes it is designed to be rendered with. These values are negotiated with the user’s preferences, resulting in a used color scheme that affects things such as the default colors of form controls and scrollbars. (See § 2.2 Effects of the Used Color Scheme.)

Note: Because many pages were authored before color scheme support existed, user agents cannot automatically adapt the colors used in elements under their control, as it might cause unreadable color contrast with the surrounding page.

Host languages can define the page’s supported color schemes, a list of color schemes supported by default for all elements on that page.

Note: [HTML] specifies a color-scheme meta tag which can be used to set the page’s supported color schemes.

Values are defined as follows:

normal

Indicates that the element supports the page’s supported color schemes, if they are set, or that it supports no color schemes at all otherwise.

light

Indicates that the element supports a light color scheme.

dark

Indicates that the element supports a dark color scheme.

only

Forbids the user agent from overriding the color scheme for the element.

<custom-ident>

<custom-ident> values are meaningless, and exist only for future compatibility, so that future added color schemes do not invalidate the color-scheme declaration in legacy user agents. User agents must not interpret any <custom-ident> values as having a meaning; any additional recognized color schemes must be explicitly added to this property’s grammar.

Note: To avoid confusion, authoring tutorials and references should omit <custom-ident> from their materials.

The normal, light, dark, and only keywords are not valid <custom-ident>s in this property.

Note: Light and dark color schemes are not specific color palettes. For example, a stark black-on-white scheme and a sepia dark-on-tan scheme would both be considered light color schemes. To ensure particular foreground or background colors, they need to be specified explicitly.

Note: User agents are not required to support any particular color scheme, so only using a single keyword, such as color-scheme: dark, to indicate a required color scheme is still not guaranteed to have any effect on the rendering of the element.

:root {
  color-scheme: light dark;
}

:root {
  color-scheme: light;
}

:root {
  color-scheme: dark;
}

:root {
  color-scheme: light dark;
}

.light-theme-example {
  color-scheme: light;
}

.dark-theme-example {
  color-scheme: dark;
}

Note: Repeating a keyword, such as color-scheme: light light, is valid but has no additional effect beyond what the first instance of the keyword provides.

2.2. Effects of the Used Color Scheme

For all elements, the user agent must match the following to the used color scheme:

• the default colors of scrollbars and other interaction UI

• the default colors of form controls and other "specially-rendered" elements

• the default colors of other browser-provided UI, such as "spellcheck" underlines

On the root element, the used color scheme additionally must affect the surface color of the canvas, and the viewport’s scrollbars.

In order to preserve expected color contrasts, in the case of embedded documents typically rendered over a transparent canvas (such as provided via an HTML iframe element), if the used color scheme of the element and the used color scheme of the embedded document’s root element do not match, then the UA must use an opaque canvas of the Canvas color appropriate to the embedded document’s used color scheme instead of a transparent canvas. This rule does not apply to documents embedded via elements intended for graphics (such as img elements embedding an SVG document).

Note: Aside from the small list of adjustments given above, user agents generally do not further adjust a page to match the user’s preferred color scheme, because the chance of accidentally ruining a page is too high. However, when particular color choices are required by the user (for accessibility reasons, for example), more invasive changes might be applied; see § 3 Forced Color Palettes.

2.3. Overriding the Color Scheme

If the user has indicated an overriding preference for a particular color scheme, and the author has not disallowed this (by using the only keyword), the user agent may override the color scheme, forcing the used color scheme to the user’s preferred color scheme. If the element does not support that color scheme, the user agent must also auto-adjust other colors into this chosen color scheme, such as by inverting their brightness, while preserving any color contrast necessary for readability of the page. In this case, UA may also auto-adjust colors within replaced elements, background images, and other external resources as appropriate.

Note: The specifics of such auto-adjustments are UA-defined, and can differ from UA to UA. But it is not intended to force all colors into a fixed palette, as forced colors mode does, only to force all colors on the page to conform to either a dark or light color scheme.

3. Forced Color Palettes

Forced colors mode is an accessibility feature intended to increase the readability of text through color contrast. Individuals with limited vision often find it more comfortable to read content when there is a particular type of contrast between foreground and background colors.

Operating systems can provide built-in color themes, such as Windows’ high contrast black-on-white and high-contrast white-on-black themes. Users can also customize their own themes, for example to provide low contrast or hue contrast.

In forced colors mode, the user agent enforces the user’s preferred color palette on the page, overriding the author’s chosen colors for specific properties, see § 3.1 Properties Affected by Forced Colors Mode. It may also enforce a “backplate” underneath text (similar to the way backgrounds are painted on the ::selection pseudo-element) to ensure adequate contrast for readability.

To enable pages to adapt to forced colors mode user agents will match the forced-colors media query and must provide the required color palette through the CSS system colors (see [CSS-COLOR-4]). Additionally, if the UA determines, based on Lab lightness, that the Canvas color is clearly either dark (L < 33%) or light (L > 67%), then it must match the appropriate value of the prefers-color-scheme media query and express a corresponding user preference for color-scheme. This will allow pages that support light/dark color schemes to automatically adjust to more closely match the forced color scheme. Behavior between the above dark vs. light thresholds is UA-defined, and may result in assuming either light or dark as the user’s preferred color scheme.

3.1. Properties Affected by Forced Colors Mode

When forced colors mode is active and forced-color-adjust is auto (see below) on an element, colors on the element are force-adjusted to the user’s preferred color palette.

Specifically, for each of the following properties:

• color
• fill
• stroke
• text-decoration-color
• text-emphasis-color
• border-color
• outline-color
• column-rule-color
• scrollbar-color
• -webkit-tap-highlight-color
• background-color
• caret-color
• flood-color
• lighting-color
• stop-color

if its computed value is a color other than a system color, its used value is instead forced to a system color as follows:

• For background-color in particular, it is forced to the color opposite the color property’s system color value in the system color pairings, using CanvasText as the opposite of Canvas. However, its alpha channel is taken from the original background-color value so that transparent backgrounds remain transparent.

• In all other cases, the UA determines the appropriate forced system color—​which should match the color that would result from an empty author style sheet whenever all of the element’s affected properties are likewise UA-determined.

  UAs need to be careful about inheritance when forcing colors. For example, suppose the UA’s button color and background-color are the opposite of its canvas color and background-color. Given markup such as

  <button>Push <em>this</em> button</button>
  

  Normally, em will inherit from button, ensuring its readability. However in forced colors mode, the color of both button and em will need to be forced. It’s easy to see that button’s color should be forced to the button color, but em also needs to be forced to the button color; if it were forced to the canvas color like it is everywhere else in the document, its text will be unreadable.

Additionally:

• box-shadow and text-shadow compute to none

• background-image computes to none unless the original value contains a url() function

• color-scheme computes to light dark

• scrollbar-color computed to auto

• accent-color computed to auto

UAs may further tweak these forced colors mode heuristics to provide better user experience.

.example {
  color: color-mix(in srgb, CanvasText, Canvas);
}

3.2. Opting Out of a Forced Color Palette: the forced-color-adjust property

The forced-color-adjust property allows authors to opt particular elements out of forced colors mode, restoring full control over the colors to CSS. Values have the following meanings:

auto

The element’s colors are automatically adjusted by the UA in forced colors mode.

none

The element’s colors are not automatically adjusted by the UA in forced colors mode.

Authors should only use this value when they are themselves adjusting the colors to support the user’s color and contrast needs and need to make changes to the UA’s default adjustments to provide a more appropriate user experience for those elements.

preserve-parent-color

In forced colors mode, if the color property inherits from its parent (i.e. there is no cascaded value or the cascaded value is currentColor, inherit, or another keyword that inherits from the parent), then it computes to the used color of its parent’s color value.

In all other respects, behaves the same as none.

Note: This value is intended solely to get a reasonable behavior from embedded SVG elements that expect to receive the outer document’s text color (and stay consistent with adjustments from forced colors mode), while otherwise defaulting SVGs to preserving their exact colors, as forced colors mode can’t generally be usefully applied to illustrations.

In order to not break SVG content, UAs are expected to add the following rules to their UA style sheet:

@namespace "http://www.w3.org/2000/svg";
svg|svg { forced-color-adjust: preserve-parent-color; }
svg|foreignObject { forced-color-adjust: auto; }

UAs must propagate the forced-color-adjust value set on the root element to the document viewport (where it can affect e.g. the canvas background). Note that forced-color-adjust is not propagated from HTML body.

4. Performance-based Color Adjustments

On most monitors, the color choices that authors make have no significant difference in terms of how the device performs; displaying a document with a white background or a black background is approximately equally easy.

However, some devices have limitations and other qualities that make this assumption untrue. For example, printers tend to print on white paper; a document with a white background thus has to spend no ink on drawing that background, while a document with a black background will have to expend a large amount of ink filling in the background color. This tends to look fairly bad, and sometimes has deleterious physical effects on the paper, not to mention the vastly increased printing cost from expending the extra ink. Even fairly small differences, such as coloring text black versus dark gray, can be quite different when printing, as it switches from using a single black ink to a mixture of cyan, magenta, and yellow ink, resulting in higher ink usage and lower resolution.

As a result, in some circumstances user agents will alter the styles an author specifies in some particular context, adjusting them to be more appropriate for the output device and to accommodate what they assume the user would prefer. However, in some cases the document may be using colors in important, well-thought-out ways that the user would appreciate, and so the document would like some way to hint to the user agent that it might want to respect the page’s color choices. This section defines properties for controlling these automatic adjustments.

4.1. Ink Economy: the print-color-adjust property

The print-color-adjust property provides a hint to the user-agent about how it should treat color and style choices that might be expensive or generally unwise on a printer or similar device, such as using light text on a dark background. If user agents allow users to control this aspect of the document’s display, the user preference must be respected more strongly than the hint provided by print-color-adjust. It has the following values:

economy

The user agent should make adjustments to the page’s styling as it deems necessary and prudent for the output device.

For example, if the document is being printed, a user agent might ignore any backgrounds and adjust text color to be sufficiently dark, to minimize ink usage.

exact

This value indicates that the page is using color and styling on the specified element in a way which is important and significant, and which should not be tweaked or changed except at the user’s request.

For example, a mapping website offering printed directions might "zebra-stripe" the steps in the directions, alternating between white and light gray backgrounds. Losing this zebra-striping and having a pure-white background would make the directions harder to read with a quick glance when distracted in a car.

UAs must propagate the print-color-adjust value set on the root element to the document viewport (where it can affect e.g. the canvas background). Note that print-color-adjust is not propagated from HTML body.

4.2. The color-adjust Shorthand

The color-adjust shorthand allows an author to set all of the performance-motivated color adjustment properties in one declaration. (Currently, there is only one such property—​print-color-adjust—​but more might be added in the future.)

The color-adjust shorthand is currently deprecated. Authors should use the more specific print-color-adjust property, to avoid accidentally resetting performance-based color adjustments in other contexts than the one intended.

5. Privacy Considerations

Applying user color preferences via color schemes or forced colors mode exposes the user’s color preferences to the page via getComputedStyle(), which can increase fingerprinting surface.

6. Security Considerations

It may be possible for an embedded document to use timing attacks to determine whether its own color-scheme matches that of its embedding iframe or not.

7. Acknowledgements

This specification would not be possible without the development efforts of various color adjustment features at Apple, Google, and Microsoft as well as discussions about print adjustments on www-style. In particular, the CSS Working Group would like to thank: Alison Maher, François Remy, イアンフェッティ

List additional MSFT / Apple / Google people here.

8. Changes

Changes since the 10 February 2022 Candidate Recommendation Snapshot:

• Removed special handling of color() fallback system colors, since the feature was removed from [CSS-COLOR-4]. (Issue 7007)

See also Changes prior to Candidate Recommendation.