CSS Color Adjustment Module Level 1

CSS Color Adjustment Module Level 1
CSS Color Adjustment Module Level 1
W3C Candidate Recommendation Snapshot
16 December 2025
More details about this document
This version:
Latest published version:
Editor's Draft:
Previous Versions:
History:
Implementation Report:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Alison Maher
Microsoft
Elika J. Etemad / fantasai
Apple
Rossen Atanassov
Microsoft
Rune Lillesveen
Google
Tab Atkins Jr.
Google
Suggest an Edit for this Spec:
GitHub Editor
Test Suite:
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
This module introduces a model and controls over automatic color adjustment by the user agent to handle user preferences, such as "Dark Mode", contrast adjustment, or specific desired color schemes.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This section describes the status of this document at the time of its publication.
A list of current W3C publications
and the latest revision of this technical report
can be found in the
W3C standards and drafts index.
This document was published
by the
CSS Working Group
as a
Candidate Recommendation Snapshot
using the
Recommendation
track
Publication as a Candidate Recommendation
does not imply endorsement by
W3C
and its Members.
A Candidate Recommendation Snapshot has received
wide review
is intended to gather implementation experience, and has commitments from Working Group members to
royalty-free licensing
for implementations.
This document is intended to become a W3C Recommendation;
it will remain a Candidate Recommendation at least until
16 February 2026
to gather additional feedback.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-color-adjust” in the title, like this:
“[css-color-adjust]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
This document was produced by a group operating under the
W3C Patent Policy
W3C maintains a
public list of any patent disclosures
made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent that the individual believes
contains
Essential Claim(s)
must disclose the information in accordance with
section 6 of the W3C Patent Policy
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:
light color scheme
("day mode")
consists of light background colors and dark foreground/text colors.
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

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
[WCAG22]
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
Name:
color-scheme
Value:
normal
[ light
dark

&&
only
Initial:
normal
Applies to:
all elements and text
Inherited:
yes
Percentages:
n/a
Computed value:
the keyword
normal
, or an ordered list of specified color scheme keywords
Canonical order:
per grammar
Animation type:
discrete
Tests
color-scheme-computed.html
(live test)
(source)
color-scheme-invalid.html
(live test)
(source)
color-scheme-valid.html
(live test)
(source)
color-scheme-change-checkbox.html
(live test)
(source)
color-scheme-color-property.html
(live test)
(source)
color-scheme-iframe-background-mismatch-alpha.html
(live test)
(source)
color-scheme-iframe-background-mismatch-opaque-cross-origin.sub.html
(live test)
(source)
color-scheme-iframe-background-mismatch-opaque.html
(live test)
(source)
color-scheme-iframe-background-mismatch-used-preferred.html
(live test)
(source)
color-scheme-iframe-background.html
(live test)
(source)
color-scheme-iframe-dynamic.html
(live test)
(source)
color-scheme-iframe-preferred-change.html
(live test)
(source)
color-scheme-iframe-preferred-page-dark.html
(live test)
(source)
color-scheme-iframe-preferred-page-light.html
(live test)
(source)
color-scheme-iframe-preferred.html
(live test)
(source)
color-scheme-link-crash.html
(live test)
(source)
color-scheme-root-background.html
(live test)
(source)
color-scheme-rule-cache.html
(live test)
(source)
color-scheme-system-colors.html
(live test)
(source)
color-scheme-table-border-currentcolor-responsive.html
(live test)
(source)
color-scheme-visited-link-initial.html
(live test)
(source)
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.


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

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

from their materials.
The
normal
light
dark
, and
only
keywords
are not valid

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.
To
determine the used color scheme
of an element:
If the user’s
preferred color scheme
as indicated by the
prefers-color-scheme
media feature,
is present among the listed
color schemes
and is supported by the user agent,
that’s the element’s
used color scheme
Otherwise,
if the user has indicated an overriding preference for their chosen color scheme,
and the
only
keyword is not present in
color-scheme
for the element,
the user agent must
override the color scheme
with the user’s
preferred color scheme
See
§ 2.3 Overriding the Color Scheme
Otherwise,
if the user agent supports at least one of the listed
color schemes
the
used color scheme
is
the first supported
color scheme
in the list.
Otherwise,
the
used color scheme
is the browser default.
(Same as
normal
.)
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.
A page that responds to user preferences for light or dark display
by using the
prefers-color-scheme
media feature
to alter the colors it uses
can easily opt the browser-controlled UI
(scrollbars, inputs, etc)
to match
with a simple global declaration:
:root
color-scheme
light dark
If a page limits itself to using
only
the

s,
the
color-scheme
declaration, above,
will support the user’s preferred color scheme
even without the author needing to use
@media
at all.
If a page cannot reasonably accommodate all color schemes,
such as for branding or theatrical reasons,
color-scheme
can still indicate which color schemes the page
can
support,
causing the UI to match.
If the page’s color scheme is primarily light,
the following will indicate that explicitly:
:root
color-scheme
light
While if the page is primarily dark,
indicating that explicitly will make the page look more coherent as well:
:root
color-scheme
dark
However, it is better to support both color schemes,
of course.
A page might be generally capable of handling multiple color schemes,
while still having a sub-section that needs to be rendered in a particular color scheme.
For example,
a style guide might give several UI examples that are using light or dark colors,
showing off the light or dark theme specifically.
This can be indicated as:
:root
color-scheme
light dark
.light-theme-example
color-scheme
light
.dark-theme-example
color-scheme
dark
Only the subsections rooted at
.light-theme-example
or
.dark-theme-example
will be opted into the
light
or
dark
themes specifically;
the rest of the page will respect the user’s preference.
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.
For example, a UA might have a “dark room” mode,
which forces all pages into a
dark
color scheme.
For pages that already support
dark
color schemes,
and have indicated so using the
color-scheme
property
or
color-scheme
meta
name,
this has no effect other than reporting a
dark
value
for the
prefers-color-scheme
media query
and selecting a
dark
used color scheme
But for pages that do not explicitly support a
dark
color scheme,
and have not explicitly forbidden this auto-adjustment
by specifying
color-scheme: only light
this mode triggers auto-adjustment of the page’s colors
to
force
the page to conform to the desired
dark
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.
If
get emulated forced colors theme data
is not "
none
",
the user agent should bypass the above operating system color themes,
and instead act as if the user has enabled
forced colors mode
with the
forced colors mode emulation color palette
defined for
the resulting value of
emulated forced colors theme data
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,
the

components of all properties on the element
are force-adjusted to the user’s preferred color palette.
Specifically,
forced colors mode
applies to the following color properties,
along with their shorthands.
This is the list of color properties existing at the time of writing,
but it may not be an exhaustive list as more properties get added over time:
accent-color
background-color
border-color
caret-color
color
flood-color
fill
lighting-color
outline-color
rule-color
scrollbar-color
stop-color
stroke
text-decoration-color
text-emphasis-color
-webkit-tap-highlight-color
For each

component of a property,
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
computes to
auto
accent-color
computes to
auto
If
font-variant-emoji
computes to
normal
or
unicode
UAs should force any emoji on the page to its monochrome variant, if available,
by forcing the
computed value
of
font-variant-emoji
to
text
UAs may further tweak these
forced colors mode
heuristics
to provide better user experience.
Authors may still use features such as
color-mix()
in
forced colors mode
In such cases, the
computed value
will behave as it would normally,
but the
used value
will be overridden with an appropriate
system color
.example
color
color-mix
in srgb
CanvasText
Canvas
);
The
computed value
for
color
will be a 50-50 blend of the
CanvasText
and
Canvas
system colors
That value will inherit to descendants and be observable via APIs such as
computedStyleMap()
The
used value
for
color
will be a system color chosen by the UA, for example
CanvasText
3.2.
Opting Out of a Forced Color Palette: the
forced-color-adjust
property
Name:
forced-color-adjust
Value:
auto
none
preserve-parent-color
Initial:
auto
Applies to:
all elements and text
Inherited:
yes
Percentages:
n/a
Computed value:
as specified
Canonical order:
per grammar
Animation type:
not animatable
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
Tests
inheritance.html
(live test)
(source)
forced-color-adjust-computed.html
(live test)
(source)
forced-color-adjust-invalid.html
(live test)
(source)
forced-color-adjust-valid.html
(live test)
(source)
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
Name:
print-color-adjust
Value:
economy
exact
Initial:
economy
Applies to:
all elements
Inherited:
yes
Percentages:
N/A
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
Tests
print-color-adjust.html
(live test)
(source)
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
Name:
color-adjust
Value:
<'print-color-adjust'>
Initial:
see individual properties
Applies to:
see individual properties
Inherited:
see individual properties
Percentages:
see individual properties
Computed value:
see individual properties
Animation type:
see individual properties
Canonical order:
per grammar
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.
Tests
color-scheme-no-interpolation.html
(live test)
(source)
forced-color-adjust-no-interpolation.html
(live test)
(source)
inheritance.html
(live test)
(source)
5.
Emulation
For the purposes of user agent automation and application testing, this document
defines the below emulations.
5.1.
Emulate Forced Colors Mode
Each
top-level traversable
has an associated
emulated forced colors theme data
, which is data representing
ForcedColorsModeAutomationTheme
, initially "
none
".
enum
ForcedColorsModeAutomationTheme
"none"
"light"
"dark"
};
To
set emulated forced colors theme data
, given
navigable
navigable
and an
emulatedThemeData
Assert
emulatedThemeData
is
ForcedColorsModeAutomationTheme
Let
traversable
be
navigable
’s
top-level traversable
If
traversable
is not null:
Set
traversable
’s associated
emulated forced colors theme data
to
emulatedThemeData
UAs must consider this a change that requires style recalculation.
To
get emulated forced colors theme data
, given
ForcedColorsModeAutomationTheme
theme
Let
navigable
be
theme
’s
relevant global object
’s
associated Document
’s
node navigable
If
navigable
is null, return null.
Let
traversable
be
navigable
’s
top-level traversable
If
traversable
is null, return null.
Return
traversable
’s associated
emulated forced colors theme data
5.2.
Forced Colors Mode Color Palettes
For the purposes of user agent automation and application testing, this document
defines the below
forced colors mode emulation color palettes
System color
mappings for "
light

keyword
Value
AccentColor
#FFFFFF
AccentColorText
#000000
ActiveText
#00009F
ButtonBorder
#000000
ButtonFace
#FFFFFF
ButtonText
#000000
Canvas
#FFFFFF
CanvasText
#000000
Field
#FFFFFF
FieldText
#000000
GrayText
#600000
Highlight
#37006E
HighlightText
#FFFFFF
LinkText
#00009F
Mark
N/A - this
system color
keyword should not be adjusted.
MarkText
N/A - this
system color
keyword should not be adjusted.
SelectedItem
#37006E
SelectedItemText
#FFFFFF
VisitedText
#00009F
System color
mappings for "
dark

keyword
Value
AccentColor
#000000
AccentColorText
#FFFFFF
ActiveText
#FFFF00
ButtonBorder
#000000
ButtonFace
#000000
ButtonText
#FFFFFF
Canvas
#000000
CanvasText
#FFFFFF
Field
#000000
FieldText
#FFFFFF
GrayText
#3FF23F
Highlight
#1AEBFF
HighlightText
#000000
LinkText
#FFFF00
Mark
N/A - this
system color
keyword should not be adjusted.
MarkText
N/A - this
system color
keyword should not be adjusted.
SelectedItem
#1AEBFF
SelectedItemText
#000000
VisitedText
#FFFF00
6.
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.
Avoiding this comes with unfortunate drawbacks that were deemed too significant to be ignored.
Namely:
preserving system colors as keywords until actual-value time
would break a significant amount of deployed script,
as the initial value of
color
is a system color already
(but a huge amount of script implicitly expects to see an RGB color from
color
lying about system colors from the scripting APIs
(pretending they’re always some static values)
can result in any colors calculated
from
page colors in script
being unreadable when used with the
actual
system colors.
See
Issue 5710
for discussion on this topic.
7.
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.
8.
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:
François Remy,
イアンフェッティ
List additional MSFT / Apple / Google people here.
9.
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
Added emulation support for improved testing of
forced colors mode
Issue 11824
Updated the properties that apply in
forced colors mode
to more generically apply to the

components of all properties,
with specific known properties moved to a note.
Issue 11857
Added font emoji fallback logic for
forced colors mode
Issue 8064
See also
Changes prior to Candidate Recommendation
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with

, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
CR exit criteria
For this specification to be advanced to Proposed Recommendation,
there must be at least two independent, interoperable implementations
of each feature. Each feature may be implemented by a different set of
products, there is no requirement that all features be implemented by
a single product. For the purposes of this criterion, we define the
following terms:
independent
each implementation must be developed by a
different party and cannot share, reuse, or derive from code
used by another qualifying implementation. Sections of code that
have no bearing on the implementation of this specification are
exempt from this requirement.
interoperable
passing the respective test case(s) in the
official CSS test suite, or, if the implementation is not a Web
browser, an equivalent test. Every relevant test in the test
suite should have an equivalent test created if such a user
agent (UA) is to be used to claim interoperability. In addition
if such a UA is to be used to claim interoperability, then there
must one or more additional UAs which can also pass those
equivalent tests in the same way for the purpose of
interoperability. The equivalent tests must be made publicly
available for the purposes of peer review.
implementation
a user agent which:
implements the specification.
is available to the general public. The implementation may
be a shipping product or other publicly available version
(i.e., beta version, preview release, or "nightly build").
Non-shipping product releases must have implemented the
feature(s) for a period of at least one month in order to
demonstrate stability.
is not experimental (i.e., a version specifically designed
to pass the test suite and is not intended for normal usage
going forward).
The specification will remain Candidate Recommendation for at least
six months.
Index
Terms defined by this specification
auto
, in § 3.2
color-adjust
, in § 4.2
color scheme
, in § 2
color-scheme
, in § 2.1

, in § 2.1
"dark"
, in § 5.1
dark
definition of
, in § 2
value for color-scheme
, in § 2.1
dark color scheme
, in § 2
determine the used color scheme
, in § 2.1
economy
, in § 4.1
emulated forced colors theme data
, in § 5.1
exact
, in § 4.1
forced-color-adjust
, in § 3.2
Forced colors mode
, in § 3
ForcedColorsModeAutomationTheme
, in § 5.1
forced colors mode emulation color palettes
, in § 5.2
get emulated forced colors theme data
, in § 5.1
"light"
, in § 5.1
light
definition of
, in § 2
value for color-scheme
, in § 2.1
light color scheme
, in § 2
"none"
, in § 5.1
none
, in § 3.2
normal
, in § 2.1
only
, in § 2.1
override the color scheme
, in § 2.3
page’s supported color schemes
, in § 2.1
preferred color scheme
, in § 2
preserve-parent-color
, in § 3.2
print-color-adjust
, in § 4.1
set emulated forced colors theme data
, in § 5.1
used color scheme
, in § 2.1
Terms defined by reference
[CSS-BACKGROUNDS-3]
defines the following terms:
background-color
background-image
border-color
box-shadow
none
(for background-image)
none
(for box-shadow)
[CSS-CASCADE-5]
defines the following terms:
author style sheet
cascaded value
computed value
inherit
used value
[CSS-COLOR-4]
defines the following terms:

AccentColor
AccentColorText
ActiveText
ButtonBorder
ButtonFace
ButtonText
canvas
CanvasText
color
currentcolor
field
FieldText
GrayText
highlight
HighlightText
LinkText
mark
MarkText
SelectedItem
SelectedItemText
system color pairings
system colors
VisitedText
[CSS-COLOR-5]
defines the following terms:

color()
color-mix()
[CSS-CONDITIONAL-3]
defines the following terms:
@media
[CSS-FONTS-4]
defines the following terms:
font-variant-emoji
normal
text
unicode
[CSS-GAPS-1]
defines the following terms:
rule-color
[CSS-PSEUDO-4]
defines the following terms:
::selection
[CSS-SCROLLBARS-1]
defines the following terms:
auto
scrollbar-color
[CSS-TEXT-DECOR-4]
defines the following terms:
text-decoration-color
text-emphasis-color
text-shadow
[CSS-TYPED-OM-1]
defines the following terms:
computedStyleMap()
[CSS-UI-4]
defines the following terms:
accent-color
auto
caret-color
outline-color
[CSS-VALUES-4]
defines the following terms:
&&

CSS-wide keywords
url()
[CSS2]
defines the following terms:
canvas
[CSSOM-1]
defines the following terms:
getComputedStyle(elt)
[FILL-STROKE-3]
defines the following terms:
fill
stroke
[FILTER-EFFECTS-1]
defines the following terms:
flood-color
lighting-color
[HTML]
defines the following terms:
associated Document
body
button
color-scheme
em
iframe
img
meta
navigable
node navigable
relevant global object
top-level traversable
top-level traversable
(for navigable)
[MEDIAQUERIES-5]
defines the following terms:
dark
forced-colors
media query
prefers-color-scheme
prefers-contrast
[SVG2]
defines the following terms:
stop-color
References
Normative References
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. 11 March 2024. CRD. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. 13 January 2022. CR. URL:
[CSS-COLOR-4]
Chris Lilley; Tab Atkins Jr.; Lea Verou.
CSS Color Module Level 4
. 24 April 2025. CRD. URL:
[CSS-COLOR-5]
Chris Lilley; et al.
CSS Color Module Level 5
. 18 March 2025. WD. URL:
[CSS-FONTS-4]
Chris Lilley.
CSS Fonts Module Level 4
. 1 February 2024. WD. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. 27 June 2025. WD. URL:
[CSS-SCROLLBARS-1]
Tantek Çelik; Rossen Atanassov; Florian Rivoal.
CSS Scrollbars Styling Module Level 1
. 9 December 2021. CR. URL:
[CSS-TEXT-DECOR-4]
Elika Etemad; Koji Ishii.
CSS Text Decoration Module Level 4
. 4 May 2022. WD. URL:
[CSS-UI-4]
Florian Rivoal.
CSS Basic User Interface Module Level 4
. 16 March 2021. WD. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. 22 March 2024. CRD. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. 12 March 2024. WD. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. 7 June 2011. REC. URL:
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. 26 August 2021. WD. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[MEDIAQUERIES-5]
Dean Jackson; et al.
Media Queries Level 5
. 18 December 2021. WD. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
Informative References
[CSS-CONDITIONAL-3]
Chris Lilley; David Baron; Elika Etemad.
CSS Conditional Rules Module Level 3
. 15 August 2024. CRD. URL:
[CSS-GAPS-1]
Kevin Babbitt.
CSS Gap Decorations Module Level 1
. 17 April 2025. FPWD. URL:
[CSS-TYPED-OM-1]
Tab Atkins Jr.; François Remy.
CSS Typed OM Level 1
. 21 March 2024. WD. URL:
[FILL-STROKE-3]
Elika Etemad; Tab Atkins Jr..
CSS Fill and Stroke Module Level 3
. 13 April 2017. FPWD. URL:
[FILTER-EFFECTS-1]
Dirk Schulze; Dean Jackson.
Filter Effects Module Level 1
. 18 December 2018. WD. URL:
[SVG2]
Amelia Bellamy-Royds; et al.
Scalable Vector Graphics (SVG) 2
. 4 October 2018. CR. URL:
[WCAG22]
Michael Cooper; et al.
Web Content Accessibility Guidelines (WCAG) 2.2
. 12 December 2024. REC. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Anim­ation type
Canonical order
Com­puted value
color-adjust
<'print-color-adjust'>
see individual properties
see individual properties
see individual properties
see individual properties
see individual properties
per grammar
see individual properties
color-scheme
normal | [ light | dark | ]+ && only?
normal
all elements and text
yes
n/a
discrete
per grammar
the keyword normal, or an ordered list of specified color scheme keywords
forced-color-adjust
auto | none | preserve-parent-color
auto
all elements and text
yes
n/a
not animatable
per grammar
as specified
print-color-adjust
economy | exact
economy
all elements
yes
N/A
discrete
per grammar
specified keyword
IDL Index
enum
ForcedColorsModeAutomationTheme
"none"
"light"
"dark"
};
Issues Index
List additional MSFT / Apple / Google people here.