Intent to Prototype: Media Queries: prefers-contrast feature

59 views
Skip to first unread message

Alison Maher

unread,
Oct 15, 2020, 12:59:40 PM10/15/20
to blin...@chromium.org, Daniel Libby

Contact emails

alm...@microsoft.com

Explainer

None

Specification

https://drafts.csswg.org/mediaqueries-5/#prefers-contrast

Summary

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>CSS

Search tags

prefers-contrast, contrast, css

TAG 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)?

Yes

The 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.



Is this feature fully tested by web-platform-tests?

Yes

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1107431

Link to entry on the Chrome Platform Status

https://www.chromestatus.com/feature/5646323212615680
Reply all
Reply to author
Forward
0 new messages