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.
Note: This feature is not supported by any user agent and its specifics are subject to change.
The forced-colors
media feature indicates whether or not the browser is currently in forced-colors mode.
none
active
prefers-color-scheme
so that authors can adapt the page.In forced colors mode, the values of the following properties are treated as if they have no author-level values specified. That is, user-specified values (if any) or browser-specified values are used instead.
color
fill
stroke
text-decoration-color
text-emphasis-color
border-color
outline-color
column-rule-color
scrollbar-color
-webkit-tap-highlight-color
box-shadow
text-shadow
You can use system color keywords 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.
Currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely rely on the settings provided by the operating system in use.
Note: No browser currently implements this feature so the following example will not work.
This example has an annoying color palette by default. This example does not take advantage of the colors provided by the user agent.
<div class="colors">weird color box</div>
.colors { background-color: red; color: grey; } @media (forced-colors: active) { .colors { background-color: white; color: black; } }
Specification | Status | Comment |
---|---|---|
Media Queries Level 5 The definition of 'forced-colors' in that specification. | Editor's Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
forced-colors media feature
|
79
|
79 | 81
|
No | No | No |
Mobile | ||||||
---|---|---|---|---|---|---|
forced-colors media feature
|
No
|
No
|
No | No | No | No
|
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors