Intent to Ship: Media Queries: prefers-contrast feature

145 views
Skip to first unread message

Sara Tang

unread,
Aug 4, 2021, 10:55:20 PM8/4/21
to blin...@chromium.org, Alison Maher, Daniel Libby

Contact emails

alm...@microsoft.com, sar...@microsoft.com

Explainer

None

Specification

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

Summary

Adds the 'prefers-contrast' media query feature, which lets authors adapt web content to user-selected levels of contrast in the OS, such as Increased Contrast mode on macOS and Contrast Themes on Windows. Valid options are 'more', 'less', 'custom', or 'no-preference'.


Blink component

Blink>CSS

Search tags

prefers-contrast, contrast, css

TAG review

https://github.com/w3ctag/design-reviews/issues/663

TAG review status

Pending

Risks


Interoperability and Compatibility

Gecko: In development (https://hacks.mozilla.org/2020/07/adding-prefers-contrast-to-firefox/) Implemented behind a flag, but without the 'custom' value.

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 Increased Contrast is enabled on Mac or High Contrast is enabled on Linux, 'prefers-contrast' and 'prefers-contrast: more' will evaluate to true.


If Forced Colors mode is enabled on Windows, 'prefers-contrast' will evaluate to true, in addition to one of 'prefers-contrast: more', 'prefers-contrast: less', or 'prefers-contrast: custom'. Using WCAG definitions [1], and in collaboration with Windows accessibility experts, we have decided to match:

  • 'prefers-contrast: more' if the contrast ratio between the foreground and background color is 7:1 or greater;
  • 'prefers-contrast: less' if the contrast ratio between the foreground and background color is 2.5:1 or less;

  • 'prefers-contrast: custom' for all other contrast ratios.

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


Security

This feature can be used for fingerprinting as it exposes a user preference.


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: 

Flag name

--enable-blink-features=PrefersContrast

Requires code in //chrome?

  • Touches chrome/browser/chrome_content_browser_client.cc to send the contrast preference to the render process in ChromeContentBrowserClient::OverrideWebkitPrefs()
  • Relevant test in chrome/browser/chrome_content_browser_client_browsertest.cc
  • Relevant test in chrome/test/data/prefers-contrast.html

Mathias Bynens

unread,
Aug 5, 2021, 2:22:52 AM8/5/21
to Sara Tang, blin...@chromium.org, Alison Maher, Daniel Libby, Changhao Han, Johan Bay
The Intent* email template includes a “Debuggability” section, which is missing in this case. How would web developers debug this new functionality through DevTools? See https://goo.gle/devtools-checklist for context.

The relevant bug seems to be https://bugs.chromium.org/p/chromium/issues/detail?id=1130859 — could you please clarify what the latest status is?


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/MN2PR00MB068552029A57B9369AE9165AF2F19%40MN2PR00MB0685.namprd00.prod.outlook.com.

Chris Harrelson

unread,
Aug 5, 2021, 3:28:45 PM8/5/21
to Mathias Bynens, Sara Tang, blin...@chromium.org, Alison Maher, Daniel Libby, Changhao Han, Johan Bay

Alex Russell

unread,
Aug 5, 2021, 4:17:07 PM8/5/21
to blink-dev, Chris Harrelson, Sara Tang, blin...@chromium.org, Alison Maher, dli...@microsoft.com, chang...@google.com, Johan Bay, Mathias Bynens
LGTM2

On Thursday, August 5, 2021 at 12:28:45 PM UTC-7 Chris Harrelson wrote:
LGTM1

On Wed, Aug 4, 2021 at 11:22 PM 'Mathias Bynens' via blink-dev <blin...@chromium.org> wrote:
The Intent* email template includes a “Debuggability” section, which is missing in this case. How would web developers debug this new functionality through DevTools? See https://goo.gle/devtools-checklist for context.

The relevant bug seems to be https://bugs.chromium.org/p/chromium/issues/detail?id=1130859 — could you please clarify what the latest status is?


On Thu, Aug 5, 2021 at 4:55 AM 'Sara Tang' via blink-dev <blin...@chromium.org> wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Sara Tang

unread,
Aug 5, 2021, 6:00:32 PM8/5/21
to blin...@chromium.org, mt...@google.com, chri...@chromium.org, Alison Maher, Daniel Libby, sligh...@chromium.org, chang...@google.com, jo...@google.com
Hi Mathias,

The plan would be to expose prefers-contrast as a DevTools emulation: 1139777 - DevTools: emulate prefers-contrast CSS media feature - chromium. In particular, this emulation will follow the pattern for existing media features, such as prefers-color-scheme and prefers-reduced-motion.

The forced colors emulation bug that you had linked to is mostly orthogonal to this one. Although, since they are related, we would need to determine how the forced colors emulation should interact with prefers-contrast.

We can begin development on an emulation for prefers-contrast immediately. However, we'd like to know more about how to ship the emulation of the media query.

In particular, is there a way to link the exposure of new DevTools features to blink feature flags, or do DevTools features typically land after platform features are enabled by default?

Thanks,
Sara


From: Alex Russell <sligh...@chromium.org>
Sent: Thursday, August 5, 2021 1:17 PM
To: blink-dev <blin...@chromium.org>
Cc: Chris Harrelson <chri...@chromium.org>; Sara Tang <Sara...@microsoft.com>; blin...@chromium.org <blin...@chromium.org>; Alison Maher <Alison...@microsoft.com>; Daniel Libby <dli...@microsoft.com>; chang...@google.com <chang...@google.com>; Johan Bay <jo...@google.com>; Mathias Bynens <mt...@google.com>
Subject: [EXTERNAL] Re: [blink-dev] Intent to Ship: Media Queries: prefers-contrast feature
 

Mathias Bynens

unread,
Aug 12, 2021, 5:44:36 AM8/12/21
to Sara Tang, blin...@chromium.org, chri...@chromium.org, Alison Maher, Daniel Libby, sligh...@chromium.org, chang...@google.com, jo...@google.com
In particular, is there a way to link the exposure of new DevTools features to blink feature flags, or do DevTools features typically land after platform features are enabled by default?

There is no such mechanism. Instead, we use feature testing on the DevTools side to conditionally expose UI for experimental features. Some examples can be found in the Rendering panel: https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/entrypoints/inspector_main/RenderingOptions.ts;l=184-204;drc=d5bf8795588af194b53920e168856ecd9975cb91


On Fri, Aug 6, 2021 at 12:00 AM Sara Tang <Sara...@microsoft.com> wrote:
Hi Mathias,

The plan would be to expose prefers-contrast as a DevTools emulation: 1139777 - DevTools: emulate prefers-contrast CSS media feature - chromium. In particular, this emulation will follow the pattern for existing media features, such as prefers-color-scheme and prefers-reduced-motion.

The forced colors emulation bug that you had linked to is mostly orthogonal to this one. Although, since they are related, we would need to determine how the forced colors emulation should interact with prefers-contrast.

We can begin development on an emulation for prefers-contrast immediately. However, we'd like to know more about how to ship the emulation of the media query.

In particular, is there a way to link the exposure of new DevTools features to blink feature flags, or do DevTools features typically land after platform features are enabled by default?

Thanks,
Sara


From: Alex Russell <sligh...@chromium.org>
Sent: Thursday, August 5, 2021 1:17 PM
To: blink-dev <blin...@chromium.org>
Cc: Chris Harrelson <chri...@chromium.org>; Sara Tang <Sara...@microsoft.com>; blin...@chromium.org <blin...@chromium.org>; Alison Maher <Alison...@microsoft.com>; Daniel Libby <dli...@microsoft.com>; chang...@google.com <chang...@google.com>; Johan Bay <jo...@google.com>; Mathias Bynens <mt...@google.com>
Subject: [EXTERNAL] Re: [blink-dev] Intent to Ship: Media Queries: prefers-contrast feature
 
LGTM2

On Thursday, August 5, 2021 at 12:28:45 PM UTC-7 Chris Harrelson wrote:
LGTM1

On Wed, Aug 4, 2021 at 11:22 PM 'Mathias Bynens' via blink-dev <blin...@chromium.org> wrote:
The Intent* email template includes a “Debuggability” section, which is missing in this case. How would web developers debug this new functionality through DevTools? See https://goo.gle/devtools-checklist for context.

The relevant bug seems to be https://bugs.chromium.org/p/chromium/issues/detail?id=1130859 — could you please clarify what the latest status is?


On Thu, Aug 5, 2021 at 4:55 AM 'Sara Tang' via blink-dev <blin...@chromium.org> wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Daniel Bratell

unread,
Aug 12, 2021, 2:56:41 PM8/12/21
to Mathias Bynens, Sara Tang, blin...@chromium.org, chri...@chromium.org, Alison Maher, Daniel Libby, sligh...@chromium.org, chang...@google.com, jo...@google.com

LGTM3 to ship the media query.

Please continue working with the devtools team to make it easy to develop for.

/Daniel

Reply all
Reply to author
Forward
0 new messages