This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
The prefers-contrast
CSS media feature is used to detect if the user has requested that the web content is presented with a higher (or lower) contrast.
Syntax
no-preference
- Indicates that the user has made no preference known to the system. This keyword value evaluates as false in a 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.
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 has an annoying low contrast by default.
HTML
<div class="contrast">low contrast box</div>
CSS
.contrast {
width: 100px;
height: 100px;
outline: 2px dashed black;
}
@media (prefers-contrast: high) {
.contrast {
outline: 2px solid black;
}
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 5The definition of 'prefers-contrast' in that specification. | Editor's Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
No support No |
Edge
No support No |
Firefox Full support 80 Full support 80 Disabled' From version 80: this feature is behind the |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
See also
- Microsoft -ms-high-contrast media feature
- CSS forced-colors media query
prefers-contrast by Mozilla Contributors is licensed under CC-BY-SA 2.5.