This is an experimental technology
Check 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.
no-preference
more
less
Various operating systems do support such preferences and user agents are likely to rely on the settings provided by the operating system.
This example has an annoying low contrast by default.
<div class="contrast">low contrast box</div>
.contrast { width: 100px; height: 100px; outline: 2px dashed black; } @media (prefers-contrast: high) { .contrast { outline: 2px solid black; } }
Specification | Status | Comment |
---|---|---|
Media Queries Level 5 The definition of 'prefers-contrast' in that specification. | Editor's Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
prefers-contrast media feature
|
No | No | 80
|
No | No | No |
Mobile | ||||||
---|---|---|---|---|---|---|
prefers-contrast 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/prefers-contrast