Forced colors
The forced-colors CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the forced-color-adjust CSS property sets whether forced colors apply to an element.
Overview
The forced-colors CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the forced-color-adjust CSS property sets whether forced colors apply to an element.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 89 | 79 | 113 | | 89 | | |
| CSS at-rule | ||||||
| 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. | 89 | 79 | 89 | 16 | 89 | 16 |
| CSS property | ||||||
auto | 89 | 79 | 113 | | 89 | |
none | 89 | 79 | 113 | | 89 | |
preserve-parent-color Experimental | 106 | 106 | | | 106 | |
- Previously available under a different name: -ms-high-contrast-adjust (12)
Syntax
@media (forced-colors: active) {
/* Use a border to clearly define the element's boundaries */
.card {
border: 1px solid ButtonText;
}
/* Apply system colors to SVG icons */
.icon svg {
fill: ButtonText;
}
/* Use outline instead of box-shadow */
.focused:focus {
outline: 2px solid Highlight;
}
}Live demo
Use cases
Using Forced colors
The forced-colors CSS @media rule detects when a user has chosen to use a forced colors mode, also known as high-contrast mode, and the forced-color-adjust CSS property sets whether forced colors apply to an element.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features