prefers-contrast
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since May 2022.
The prefers-contrast CSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.
Syntax
no-preference-
Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the Boolean context.
more-
Indicates that user has notified the system that they prefer an interface that has a higher level of contrast.
less-
Indicates that user has notified the system that they prefer an interface that has a lower level of contrast.
custom-
Indicates that user has notified the system for using a specific set of colors, and the contrast implied by these colors matches neither
morenorless. This value will match the color palette specified by users offorced-colors: active.
User preferences
Various operating systems do support such preferences and user agents are likely to rely on the settings provided by the operating system.
Examples
This example includes a box with a dashed outline set on it by default. When the prefers-contrast: more media query matches, the applied outline is given a higher contrast solid style instead.
HTML
<div class="contrast">low contrast box</div>
CSS
.contrast {
margin: 5px;
width: 100px;
height: 100px;
outline: 2px dashed black;
}
@media (prefers-contrast: more) {
.contrast {
outline: 2px solid black;
}
}
Result
Specifications
| Specification |
|---|
| Media Queries Level 5 # prefers-contrast |
Browser compatibility
See also
- CSS forced-colors media query