-
Notifications
You must be signed in to change notification settings - Fork 719
[mediaqueries-5] prefers-contrast: high
media feature doesn't account for macOS and iOS
#2943
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
A few possible variants to solve this:
@media (prefers-contrast > 50) {}
@media (prefers-contrast > increase) { /* matches both 'increase' and 'high' values */ }
@media (prefers-increased-contrast) { /* matches 'increase' or 'high' */ }
@media (prefers-reduced-contrast) { /* matches 'reduce' or 'low' */ } |
Just posting that I have an active need for this feature as a web dev trying to make websites more accessible. Not sure if this is the right place, I am new here. My 2 cents on syntax, I would rather have a simpler I know it is a slider in macOS but essentially it needs to map to a high contrast checkbox in the host OS (Windows/Mac/Linux). It is up to the OS to set good defaults to what it means. But to start working with numbers is too complex imo and will not drive usage in actual CSS. |
Another suggestion I recently discussed with @grorg:
In the boolean context |
@Wolfr wrote:
The legacy slider (rarely used) would not likely affect this media feature. Currently the thinking is to have it match the highly used "increase contrast" checkbox/switch on macOS or iOS... |
To recap, I think there are several distinct concepts of contrast preference:
These seem to map nicely onto the levels in #2943 (comment) - although we seem to have lost the concept of "forced" from #443 I don't know that we'd want to conflate "high contrast" and "enhanced contrast", since they really look quite different and target different audiences. Perhaps they'd need to be separate boolean queries? |
You are right, they are separate concepts. Conflating them would lead to
confusion. Thanks for the clear explanation.
…On Tue, Jan 8, 2019 at 4:40 AM Alice ***@***.***> wrote:
To recap, I think there are several distinct concepts of contrast
preference:
- *True high contrast*, along the lines of the Windows High Contrast
Mode. This is often a light-on-dark colour scheme with white or yellow
text, black background, reduced detail, few gradations of colour etc. This
is intended for users with unusual vision impairments, who may also use
other accommodations such as screen magnification to be able to access
content.
- Despite typically being light-on-dark, this is quite different
from a "night mode" theme.
- This is often an operating system setting which affects how text,
borders and images are displayed. In this case, developers may wish to make
adjustments to ensure that these modifications don't create other problems.
This is the "forced" case, I think.
- However, certain apps also provide high contrast themes
<https://blog.jetbrains.com/idea/2018/10/intellij-idea-2018-3-eap-high-contrast-theme-and-more-accessibility-improvements/>,
and it would be good to be able to allow users to opt in to these themes on
all sites which support a common theming mechanism, such as a media query.
- *Enhanced contrast*, along the lines of OS X's setting and Gmail's
current high contrast theme, which retain much of the "standard" palette
and level of detail but enhance borders and increase text contrast to
around the WCAG AAA level or better. The WCAG AAA level is intended for
users with moderate vision impairments with a visual acuity of 20/80-20/40.
- *Acceptable contrast*, which is denoted by WCAG AA
<https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>
level. This is intended to be a standard contrast level perceivable by
people with 20/40 vision or better - considered "minimal vision impairment"
and comprising around 10% of the population of a typical wealthy country.
- There is also a small subset users who prefer *reduced contrast* for
various health reasons.
These seem to map nicely onto the levels in #2943 (comment)
<#2943 (comment)>
- although we seem to have lost the concept of "forced" from #443
<#443>
I don't know that we'd want to conflate "high contrast" and "enhanced
contrast", since they really look quite different and target different
audiences. Perhaps they'd need to be separate boolean queries?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#2943 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAAxkh92ypKO5VuvTeqMSQ8btEWM4yWiks5vBBMvgaJpZM4VZRI8>
.
|
Is there a situation where we have higher contrast than macOS's enhanced contrast, yet not have forced colors? If yes, it may be worth distinguishing between |
From the author end it seems realistic to assign colors for 3 situations, but not more.
Most websites would implement (1) and (2) - the max contrast (3) would be more like a system thing. |
FYI that leaves out the "reduced" contrast value that some have requested, but I don't know of any native OS implementations of reduced contrast, so it might be okay to forego that value until a similar feature is adopted by at least one major OS. |
That's what the Note that Windows High-Contrast feature isn't always black and white. Users can specify any colours they want for a Windows High-Contrast theme... including low contrast colours (e.g. brown text on a beige background, which suits some users with dyslexia). That's why it's being called |
I am not aware of any current platform that supports multiple built-in levels of increased contrast, but it's possible for any platform to add them in the future. I'm trying to avoid having the value vocabulary locked to an extreme end ("high") which limits future flexibility: the syntax now implies platforms could only ever implement The same underlying technologies that allow Mac/iOS native and 3rd-party apps to support light and dark modes, also allow "increased" contrast color variants in each light and dark mode. There is nothing (other than a lot of engineering effort) technically stopping Mac/iOS from adding a non-forced "high contrast" mode (+10:1) using the same underlying system. If that were to happen, which CSS value should the existing "increased contrast" user match? It wouldn't make sense to match the A possible solution is to remove the current |
Updating the suggested solution summary: Current values according to the CSS MQ5 spec: prefers-contrast: [ no-preference | high | low ] Option 1: Change the current value Forego additional values ( Con: Microsoft would need to remove their existing match for Con: If any web author used the explicit value syntax prefers-contrast: [ no-preference | increase ] /* remove `high` value */ Option 2: Keep Forego the the low contrast value ( Con: Some authors may use the verbose version prefers-contrast: [ no-preference | increase | high ] Common Usage: Same. In both proposals above, the 99.9% author usage case would be to use the boolean shorthand below, which would match all currently known increased or high contrast setting implementations. @media (prefers-contrast) |
Unless someone has ideas about a system (or otherwise) setting that would indicate that the media query should be toggled to I'm looking into adding this to Firefox and despite some digging around am having trouble finding anything. If anyone has ideas though I'd love to hear them. |
prefers-contrast: high
media feature doesn't account for macOS and iOS
A number of comments in #3856 also relate to this issue, so I encourage people to have a read (but please keep the discussion here).
This is not really similar to the unfortunately named Windows High Contrast mode, since the Windows HC mode could result in that OR in a low contrast rendering, OR in an light-on-dark rendering, OR in a fuchsia-on-sepia rendering, or whatever the user wants. It is a forced color mode, and we have an MQ for that as well as more details in https://drafts.csswg.org/css-color-adjust-1/#forced. Great presentation from @melanierichards here: https://www.w3.org/2019/09/Meetup/speaker-melanie.html I continue not to understand why you refuse to implement the value in the spec which is defined to match the mode you have in macOS and insist that we introduce an additional value which maps to the mode you have in macOS. Sure, there might be in the future an OS which has a high contrast mode that is neither that of macOS, nor is forced colors as seen on Windows, and needs to be distinguished from both of those. We'll deal with it when it exists and when we know how it actually works and to what degree it needs distinguishing. In the mean time, I don't see why we should dedicate a value in the spec to this hypothetical and add a value to deal with what actually exists today, instead of implementing the spec as is. If we just want to rename
|
Forgive my naivete here (and broadening the scope of the discussion), but is there a reason the group settled on keyword values instead of a numeric system? I wonder if the numeric system should be explored again:
I suppose the challenges may be 1) making sure numeric values don't explode in volume (maybe go off WCAG levels?) and 2) numeric values may not always align 1:1 with OS platform settings, but I think you'll get authors writing mis-aligned contrast ratios without clear guidance, anyway. |
This is a great question, and I think gets to a lot of the confusion here. In particular, WCAG doesn't really give us any guidance for the "true high contrast" case, perhaps assuming that users who need it will be using a forced colors mode?
It's true that it is a hypothetical for the time being, but it's also true that the Windows High Contrast mode and Mac Increased Contrast mode are quite different and are meeting distinct user needs. A user who needs the level of contrast offered by Windows High Contrast default colours will not be able to use the Mac Increased Contrast mode, which is really more like a WCAG AAA mode in practice. There are also variations in what websites which offer alternate colour themes are targeting. Compare VS Code's high contrast theme (yes I know it's technically not a website): with Gmail's "high" contrast theme, which is more like the Mac increased contrast mode: It may well be the case that "true" high contrast only happens in practice (other than VS Code) when there is a forced colors mode applying. However, I do also feel that we should avoid conflating these two modes, just as we avoid conflating high contrast and dark mode even though forced colours high contrast modes often do use a dark background. A website which meets WCAG AAA probably wouldn't need to do anything (assuming they include sufficiently contrasting border colours in their design) in response to A separate question is whether enough websites would respect either |
Summary of where I think we're at. Syntax 1 (spec today)
Authors should write Syntax 2
Same as 1, just renaming Syntax 3 [interpretation A]
Distinguishes between high and increase. Upside: This lets authors capture the difference between “somewhat high” and “very high”. Syntax 3 [interpretation B]Same syntax as above, but inspired by how the Syntax 4
These are defined so that only one of Upside: Key questionSyntaxes 3 and 4 allow distinguishing between |
Thanks for the comprehensive summary, @frivoal!
Sorry for not having followed this discussion, but why is there both
I definitely agree that we shouldn't match I am curious to understand the usage modes of Windows High Contrast Mode (WHCM) in practice. I recognise that the colours are user-configurable, but to what extent are users modifying the colours chosen to enable a contrast preference other than "high" (along the lines of the extremely contrasting default values of black background and fully saturated yellow/cyan/green/white foreground colours)? I would like to better understand the user needs behind choices of low-contrast and increased-contrast colour options for WHCM.
This captures the key question extremely well. My feeling is that the answer is yes, we do need to distinguish between those two concepts, because the user needs and the resulting accommodations are quite distinct from one another. In particular, a site or theme which meets WCAG AAA would likely be suitable for "increased" but likely not for "high" contrast. Even though it's not currently possible for a user on Mac to enable a "high" contrast preference (or "low" for that matter), or for a user on Windows to enable an "increased" contrast preference, I think leaving scope for those preferences to be added would be preferable to conflating these two modes. Whether we are likely to ever have a "very high but not forced colours" preference is debatable, but even if we don't, I think it's still helpful to understand that the colours that have been chosen represent a high contrast preference (or low contrast, as the case may be) for things like icon images. |
Apologies for being so slow to respond - I was on vacation without wifi all last week. I think you can go ahead without me - I can sync up with James beforehand to make sure we're on the same page. |
@frivoal wrote:
It seems like the main disagreement is with the vocabulary. We're using the term "high" differently. To me, "high" contrast means ~"max or nearly max contrast"… iOS and macOS do not have a system setting for that (it's "increased" a.k.a. "higher, but not high"), but both those platforms could have a true "high" or "max" setting, so I'm hoping we can avoid having the term "high" apply to the existing "non-high" contrast setting. I wouldn't have thought "high" contrast would be a subjective term, but as it's clear several of us are interpreting it differently, it's likely that authors will too. |
The other main issue I've taken with the current syntax proposal is that IMO, too many tangentially related concepts are being squeezed into a single property: The |
Likewise, the addition of |
I'm available at 2020-08-12 T 16:00 GMT (this Wednesday at 9 AM Pacific) to discuss. Ideally I'd like to see a useful boolean match (or otherwise very short authoring match) for Updating my proposal list from above: Option 1: Change the current value prefers-contrast: [ no-preference | increase ] /* the `increase` value can match both the iOS/macOS "increased" contrast and Windows "high" or "max" contrast settings. */ Option 2: Change Allows distinction between the different settings, but authors would still be able to use the boolean shorthand to match both. prefers-contrast: [ no-preference | increase | max ] Forego Common Usage: Same. In both proposals above, the 99.9% author usage case would be to use the boolean shorthand below, which would match all currently known "increased" or "max" contrast setting implementations. @media (prefers-contrast) |
Another possibility that would allow the @media (prefers-contrast > increase) { } /* matches `increase` or `max` but not `low` or `no-preference` */
@media (prefers-contrast < max) { } /* matches `low`/`decrease`, `no-preference`, or `increase` but not `max` */ I wanted to mention the possibilities above, though these are less desirable to me because of:
|
Yeah, English is a little hard... It's accurate to say that the boolean matching means "has a contrast preference", just not which way the preference leans. In general, the "true" boolean match for the prefers-* MQs isn't a particularly useful value, only the "false" match is. (It's just that several of the prefers-* only have a single truthy value, so an author can pretend that the presence of a preference tells them exactly what the preference is.) |
I don't agree that truthy boolean matches would never be useful. There's a lot of opportunity to have the boolean match a minimum simple preference while leaving an opening for more specific values. I haven't pushed for the more specific values yet because MQ would need to address anti-fingerprinting security before the more specific values should be implemented. For example, iOS is already shipping two variants of a native "reduce motion" setting that differentiates between pans (e.g. automatic side scrolls between screens) and other types of problematic vestibular motion like parallax and scale/zoom. The interface pans often convey a hierarchy. Other, more decorative animations are usually more extraneous, and often more problematic for those with vestibular disorders. One could see a future expansion of prefers-reduced-motion: no-preference | [ reduce | [exclude-parallax &| exclude-scale &| … ]
prefers-reduced-opacity: no-preference | [ reduce | opaque ]
prefers-(increased)-contrast: no-preference | [ increase | max ]
prefers-color-scheme: light | dark | forced |
Tab mentioned: prefers-contrast: no-preference | less | more | forced |
The CSS Working Group just discussed
The full IRC log of that discussion |
I think this is a reasonable, simple solution because:
@media (prefers-contrast: more)
The rest of the points I raised in this thread—such as the duplicated: "prefers-contrast: forced" and "forced-colors: active"— can be raised as separate issues. |
The working group also agreed to add more use cases via request from @alice. |
…ords Per the resolution here: w3c/csswg-drafts#2943 (comment) Differential Revision: https://phabricator.services.mozilla.com/D86848 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1658780 gecko-commit: f700072e4306e5c87fcc84752fcad59fe8f13d52 gecko-integration-branch: autoland gecko-reviewers: emilio
…more/less keywords r=emilio Per the resolution here: w3c/csswg-drafts#2943 (comment) Differential Revision: https://phabricator.services.mozilla.com/D86848
…ords Per the resolution here: w3c/csswg-drafts#2943 (comment) Differential Revision: https://phabricator.services.mozilla.com/D86848 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1658780 gecko-commit: f700072e4306e5c87fcc84752fcad59fe8f13d52 gecko-integration-branch: autoland gecko-reviewers: emilio
…more/less keywords r=emilio Per the resolution here: w3c/csswg-drafts#2943 (comment) Differential Revision: https://phabricator.services.mozilla.com/D86848
…ss keywords. Per the resolution here: w3c/csswg-drafts#2943 (comment) Differential Revision: https://phabricator.services.mozilla.com/D86848
In w3c/csswg-drafts#2943 and associated discussion, `prefers-contrast`'s `high` value was replaced with `more`. This PR updates the example code to match.
…more/less keywords r=emilio Per the resolution here: w3c/csswg-drafts#2943 (comment) Differential Revision: https://phabricator.services.mozilla.com/D86848
[mediaqueries-5]
prefers-contrast: high
media feature does not accurately describe the macOS/iOS statehttps://drafts.csswg.org/mediaqueries-5/#prefers-contrast
Unlike Microsoft's "high contrast" mode, the "Increased Contrast" settings on macOS and iOS do not result in "high" contrast, but an intermediate "increased" value. It's possible that a future update to these and other systems would allow a user-end "high" contrast value in addition to the current implementation of "increased" contrast.
The media feature should account for values other than "high" and "low." Ideally there'd be a shorthand way to match both the macOS/iOS value, or the extreme end value used by Microsoft.
The text was updated successfully, but these errors were encountered: