Intent to Prototype: Media Queries: prefers-contrast feature
Alison Maher
Contact emails
alm...@microsoft.comExplainer
NoneSpecification
https://drafts.csswg.org/mediaqueries-5/#prefers-contrastSummary
Adds the 'prefers-contrast' feature, which lets authors adapt web content to user-selected level of contrast in the OS, such as increased contrast mode on macOS and high contrast mode on Windows. Valid options are 'more', 'less', 'forced', or 'no-preference'.
Blink component
Blink>CSSSearch tags
prefers-contrast, contrast, cssTAG review
Given that this will only be adding a new type of media query that is already in the spec and has been resolved on by the CSSWG, no TAG review is needed.Risks
Interoperability and Compatibility
Gecko: In development (https://hacks.mozilla.org/2020/07/adding-prefers-contrast-to-firefox/) Implemented behind a flag
WebKit: Neutral (https://github.com/w3c/csswg-drafts/issues/5433)
Web developers: Positive (https://github.com/w3c/csswg-drafts/issues/1286, https://bugs.chromium.org/p/chromium/issues/detail?id=1107431&q=probablyup%40gmail.com&can=2)
Ergonomics
If Forced Colors Mode is enabled, 'prefers-contrast: forced' will evaluate to true, in addition to 'forced-colors: active'. Additionally, the spec mentions that "when the user agent can determine whether the forced color palette chosen by the user has a high or low contrast, one of 'prefers-contrast: more' or 'prefers-contrast: less' must match in addition to 'prefers-contrast: forced'." Using WCAG definitions[1], and in collaboration with Windows accessibility experts, we have decided to match 'more' in Forced Colors Mode if the contrast ratio between the foreground and background color is 7:1 or greater. "A contrast ratio of 3:1 is the minimum level recommended by [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] for standard text and vision"[1]. Given this, we will start by matching to 'less' in Forced Colors Mode if the contrast ratio between the foreground and background color is 2.5:1 or less. These ratios will act as an experimental baseline that we can adjust based on user feedback. [1] https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
YesThe feature will be supported on all platforms, but whether the user will be able to change to a specific contrast preference may depend on the OS.