*Summary*: 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 forced. *Bug*: https://bugzilla.mozilla.org/show_bug.cgi?id=1506364 *Standard*: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast *Platform coverage*: all *Preference*: layout.css.prefers-contrast.enabled *DevTools bug*: https://bugzilla.mozilla.org/show_bug.cgi?id=1651400 *Other browsers*: none. Microsoft previously implemented a similar -ms-high-contrast <https://docs.microsoft.com/en-us/previous-versions/hh771830(v=vs.85)> media query which had similar goals. *web-platform-tests*: https://bugzilla.mozilla.org/show_bug.cgi?id=1651857 *Secure Contexts*: Enabled in secure contexts, like other similar CSS features *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 <https://github.com/w3c/csswg-drafts/issues/3856#issuecomment-642139541>. There is still some discussion about the forced option and around if the high keyword accurately matches the macOS state <https://github.com/w3c/csswg-drafts/issues/2943#issuecomment-599751283>. 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. _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform
