search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.43k stars 656 forks source link

[mediaqueries-5] Media query to prefer shapes over colours #7406

Open Pyrolistical opened 2 years ago

Pyrolistical commented 2 years ago

Thank you for the recent additions of

However, none of this media queries address my accessibility problem as a colourblind person. I wish websites would use shapes over colours. For example, it is common to use green for success and red for failure. The two most common types of colourblindness are related to green/red confusion. People are directly harmed when only color is used as differentiation.

Ideally colour is used only as a secondary styling concern. However, sometimes using shapes is an afterthought and doesn't fit the original design.

Video games often address colourblindness issues by adding the ability to use shapes/patterns as additional differentiation.

Examples of "prefer shapes":

Other examples when the community suggests how to fix colour issues:

As an aside, speaking from someone who has a rather severe case of colourblindness, those "colourblind filters" video games try to make never work for me. I always need shapes. For me personally, the only two colours that are blindingly different is bright/saturated red/blue.

tabatkins commented 2 years ago

As a (much less severe) color-blind person myself, I'd appreciate this kind of thing being possible to communicate to websites. (And apps in general, but we don't have that control.)

Pyrolistical commented 2 years ago

iOS/macOS has a related accessibility option "Differentiate Without Color"

Example on what this looks like https://osxdaily.com/2016/06/26/the-mac-differentiate-without-color-accessibility-setting-explained/

tabatkins commented 2 years ago

Ooh, a pre-existing OS setting makes this much more attractive.

lukewarlow commented 1 year ago

To add to the macOS setting. Both Android and Windows have some form of colour blindness colour filtering settings. While not a direct match to prefer shapes over colours these are probably pretty good indications that can be used to match this media query should it be implemented.

Come to think of it multiple platforms have a greyscale mode too which should probably match this media query too.

cookiecrook commented 8 months ago

There are non-"shape" ways to avoid reliance on color, so I'd vote against the bikeshed name "prefers-shapes." WCAG also doesn't specifically recommend "shapes" but phrases this "Don't rely on color alone to convey information." Granted the Mac setting name "differentiate without color" doesn't exactly roll off the tongue, but that's what we landed on until a better name is identified.

cookiecrook commented 8 months ago

Further clarifying, I don't think we should have accessibility-specific Web Platform API whose nomenclature leads designers and developers toward a single solution (in this case "shapes") when that particular solution is not necessarily required.

Consider this anecdote from Jony Ive regarding the word “box” in a children's design contest. “If we were thinking of lunch box we’d be careful about not having the word box already give you a bunch of ideas that could be quite narrow, because you think of a box as being square, a cube, and so we’re quite careful with the words we use because those can sort of determine the path you go down.”

Similarly, for the vestibular-related media query, we called it—and the setting it was based on—"prefers-reduced-motion" not "stop animations" (which Windows used for a while), because entirely stopped animations aren't necessary for vestibular accommodation, and because an entire lack of animation can often reduce usability. Apple animation variants for "reduce motion" often include dissolve animations without the type of motion known to trigger vestibular discomfort.

SebastianZ commented 8 months ago

It is generally bad practice to rely on colors alone to convey meaning, even for people without disabilities. If someone knows that, they probably always add shapes and/or text and won't have a need for such a media feature. And for authors, for which accessibility is an afterthought, a media feature like that probably won't be used. So, while I myself have a red-green deficiency, I question whether that media feature would be used much.

Anyway, if we want to introduce a new media feature for this, here are some suggestions:

Sebastian

silverwind commented 4 months ago

On the other hand, some websites would like to swap colors based on the which color disability the user has. How about these, based on Wikipedia:

lukewarlow commented 4 months ago

Giving that level of granularity does increase fingerprinting surface quite drastically over a single more generic media query. I also think if you wanted that it should be 1 media query with multiple values.

If end users need a specific colour pallete that's exactly what forced colours mode is for. I understand it doesn't exist in a usable form everywhere but it could do if it was needed.

cookiecrook commented 4 months ago

From an earlier comment from @lukewarlow:

To add to the macOS [differentiate w/o color] setting. Both Android and Windows have some form of colour blindness colour filtering settings. While not a direct match to prefer shapes over colours these are probably pretty good indications that can be used to match this media query should it be implemented.

Of note Mac and iOS have condition-specific color filters too, and these are separate from the "differentiate w/o color" setting. The filters shoft problem areas of the color spectrum into less problematic colors... e.g. for someone with deuteranopia, a certain form of red/green color blindness, the reds become more pink, and the greens become more yellow, making the difference between UI controls colored red (now pinkish red) and green (now yellow-green) more perceivable.

There is no API to detect this setting, because developers changing the colors based on the value of the setting could cause additional user confusion. However, many video game developers offer various color schemes that avoid problematic ranges.

In contrast, the "differentiate without color" setting is available as a developer opt-in. This is a better solution when available, especially for those with any form of achromatopsia, as filters are a better solution for color deficiency than for true color blindness.

Come to think of it multiple platforms have a greyscale mode too which should probably match this media query too.

I recall WebKit may have implemented this a long time ago, but this is not currently matching when grayscale is applied at the system level. My suspicion is that it regressed when grayscale (previously a standalone feature) was rolled into the newer color filters section of system settings... Note: color filters is probably 10 years old at this point, not "new." 

window.matchMedia("(monochrome)").matches

Seems like this could match for either the grayscale color filter, monochrome print styles, or the "differentiate without color" setting applied.

Obligatory caveat that WebKit support of new media features is subject to these ongoing privacy discussions.