Skip to content
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

[mediaqueries-5] prefers-contrast: high media feature does not accurately describe the macOS/iOS state #2943

Open
cookiecrook opened this issue Jul 20, 2018 · 6 comments

Comments

Projects
None yet
4 participants
@cookiecrook
Copy link
Contributor

commented Jul 20, 2018

[mediaqueries-5] prefers-contrast: high media feature does not accurately describe the macOS/iOS state

https://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.

@cookiecrook

This comment has been minimized.

Copy link
Contributor Author

commented Jul 20, 2018

A few possible variants to solve this:

  1. Perhaps a numeric value, 0-100 where 50 is the default (or -100-100, where 0 is the default). There could be named values too. e.g. high = 100, increase = 60? The queries could include a greater-than/less-than (</>) syntax such as:
@media (prefers-contrast > 50) {}
@media (prefers-contrast > increase) { /* matches both 'increase' and 'high' values */ }
  1. Have two separate media features that would allow use in a boolean context:
    prefers-increased-contrast: no-preference | increase | high and prefers-reduced-contrast: no-preference | reduce | low
@media (prefers-increased-contrast)  { /* matches 'increase' or 'high' */ }
@media (prefers-reduced-contrast)  { /* matches 'reduce' or 'low' */ }
@Wolfr

This comment has been minimized.

Copy link

commented Nov 10, 2018

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 @media (prefers-increased-contrast) { } without values since the surrounding implementation depends on the OS.

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.

@cookiecrook

This comment has been minimized.

Copy link
Contributor Author

commented Nov 10, 2018

Another suggestion I recently discussed with @grorg:

prefers-contrast: [ reduce | no-preference | increase | high ]

In the boolean context @media (prefers-contrast) should match both increase or high, but not reduce or no-preference.

@cookiecrook

This comment has been minimized.

Copy link
Contributor Author

commented Nov 10, 2018

@Wolfr wrote:

I know it is a slider in macOS

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

@alice

This comment has been minimized.

Copy link
Contributor

commented Jan 8, 2019

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

@Wolfr

This comment has been minimized.

Copy link

commented Jan 8, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.