prefers-contrast is a media query that allows authors to detect visitors
contrast preferences and apply custom CSS. It currently has four possible
values, low, no-preference, forced, and high.
Low and high match when a visitor has indicated that they prefer low or
high contrast in either OS or browser level settings. For the time being,
no major platforms have implemented a low contrast toggle so it will not
match anything. Forced matches when the colors of the webpage are being
overridden. This could happen if a Windows high contrast theme is enabled
or if the browser is forcing colors. As such, it is possible for forced to
match at the same time as other keywords.
This initial implementation will remain hidden behind a preference for web
content until the CSSWG feels that the feature is ready and outstanding
issues are resolved. Shipping it in the internim will allow us to use it
internally and give web authors a chance to experiment with the media query
if they enable it via its preference. We expect that any changes in the
specification will be reflected by updates to our prototype.
When the browser is resisting fingerprinting our prototype will never
evaluate to the low or high option and will default to no-preference. We
will however still be transparent about whether or not forced colors are
present as there are ways to detect forced colors that make being dishonest
in prefers-contrast counterproductive. For example, forced colors appear in
computed style information so calling getComputedStyle(element)[“color”]
and comparing it to the expected value could reveal if colors are being
*Platform coverage*: all
*DevTools bug*: https://bugzilla.mozilla.org/show_bug.cgi?id=1651400
*Other browsers*: none. Microsoft previously implemented a similar
media query which had similar goals.
*Secure Contexts*: Enabled in secure contexts, like other similar CSS
*Is this feature enabled by default in sandboxed iframes*? yes
*How stable is the spec*:
The spec recently saw the addition of a forced option
There is still some discussion about the forced option and around if the
high keyword accurately matches the macOS state
Even if those keywords are changed, we don’t expect that it will change the
core functionality of prefers-contrast and we expect to update our
prototype to match whatever the final version looks like.