w3c / silver

Accessibility Guidelines "Silver"
https://w3c.github.io/silver/
Other
202 stars 34 forks source link

Too much contrast: halation, overstimulation, and the APCA #625

Open Seirdy opened 2 years ago

Seirdy commented 2 years ago

An APCA-based color contrast guideline looks like a great improvement over existing guidelines. However, sufficient contrast alone does not guarantee accessible colors. I worry that the APCA's recommendations for dark themes may incentivize the adoption of palettes with different accessibility issues.

Pure white-on-black palettes can cause halation. Human eyes adjust to average brightness; lightening up the background just a little can provide enough of a "glow" to eliminate the halos. Backlash against an earlier version of GitHub's dark theme was due to having a background that was too dark. Themes with extreme contrast should be reserved for a prefers-contrast: more media query.

Colors like yellow fare well against dark backgrounds according to the APCA. However, yellow and red are autism-unfriendly colors that can trigger overstimulation. The latter link also shows how extreme contrast can overstimulate. I understand that cognitive accessibility is gaining more attention in the WAI, so the cognitive accessibility of color palettes might be a good area of focus.

The impacts of yellow and red can be mitigated the same way that people mitigate blue/purple's poor contrast against dark backgrounds: lightening. Pink and very pale yellow are less overstimulating than pure red and yellow.

Right now, the APCA signals to designers that they need to lighten their blue/purple or switch to yellow/orange, when picking light backgrounds or foregrounds. It does not signal the need to also lighten yellow and orange colors. Furthermore, it doesn't acknowledge the fact that lightening the foreground + darkening the background can be taken too far and trigger halation.

I see multiple possible solutions that are not mutually exclusive:

  1. Supplement the APCA with guidelines against harsh yellows and reds, except for warnings.
  2. Revise the APCA so that it penalizes having "too much" contrast
  3. Supplement the APCA with guidelines against pure-black backgrounds, encouraging a threshold for "minimum brightness"
Myndex commented 2 years ago

HI Rohan @Seirdy

Thank you for commenting.

First, let me mention that the latest APCA guidelines have not migrated into WCAG 3 as yet. APCA has its own repo and discussion area, which you are free to post in at https://github.com/Myndex/SAPC-APCA/discussions

Also, the most current guidelines are usually listed on the APCA demo tool at https://www.myndex.com/APCA/

Under the current APCA guidelines, red against black is essentially prohibited. Also, current APCA does have a guideline against too much contrast. And as far as "pure black backgrounds" there is more to that issue — halation and glare is caused by excess luminance relative to the eye's adaptation state, inclusive of local, peripheral, and global light/dark adaptation.

I'm on my way to a meeting right now, but I would like to discuss with you further, either here or in the APCA main repo.

First though, can you tell me which APCA tools and lookup tables you are using or referring to please?

Thank you,

Andy

Myndex commented 2 years ago

HI Rohan @Seirdy

Following up, again if I can ask, can you tell me which APCA tools and lookup tables you are using or referring to in the OP please? Either here, or at the APCA repo so it can be tracked?

The current most correct release candidate version is posted on the APCA demo tool at www.myndex.com/APCA/ and also in the documentation folder at the main APCA repo.

Thank you!

Andy

Seirdy commented 2 years ago

I was misinformed; I was using the one built into Chromium's DevTools, which doesn't flag excessive contrast. I've since used the online version to much better results. Great work!

I do think that it's worth remembering that yellow is a "harsh" color, and can cause overstimulation if it isn't de-saturated. It doesn't help that it's associated with warnings and errors. Blue in dark themes needs to be lightened to have enough perceptual contrast; I think yellow should be lightened to reduce overstimulation. On light backgrounds, yellow and red can be darkened to brown or brick-red.

These sorts of plain-language instructions--de-saturate vibrant colors to improve contrast and reduce over-stimulation--could pair well with the APCA, or the APCA could penalize excessive over-saturation in a way similar to how it penalizes excessive contrast. I'm not sure the latter is a good strategy, so I'm leaning towards the former now.

-- Seirdy

Seirdy commented 2 years ago

In a nutshell: I think the APCA does a good job flagging low/high contrast, but in isolation this could incentivise autism-unfriendly over-saturated yellows in dark backgrounds. Companion documentation describing how "contrast isn't all their is to accessible colors" or a revision to APCA could work.

I filed the issue here, since I think that explicit guidance on autism- and overstimulation-friendly colors could belong in the WCAG.

-- Seirdy

Myndex commented 2 years ago

Hi Rohan @Seirdy thank you for the additional information.

I was misinformed; I was using the one built into Chromium's DevTools, which doesn't flag excessive contrast.

Indeed, the early beta versions in Chrome and Edge are not at the latest version of APCA. The latest, and canonical version for the W3 licensed version is the npm published package, npm i apca-w3

I've since used the online version to much better results. Great work!

Thank you, and let me mention a few of the other AGWG members involved, Bruce Bailey, Chris Loiselle, Alastair Campbell, Chuck Adams, Cybele Sack, Sam Waller, and the dozens of beta testers and early adopters, all whose contributions helped shape the current APCA guidelines.

I do think that it's worth remembering that yellow is a "harsh" color, and can cause overstimulation if it isn't de-saturated. It doesn't help that it's associated with warnings and errors.

In the summer of 2019 Visual Contrast sessions with Cybele & Chuck, we had discussed and developed guidelines targeting overstim, however some of what was done was deleted from the WCAG 3 working drafts and/or didn't make it into the draft.

Also, this points to a problem we are working to develop guidance for: what is helpful for one particular group may be harmful for another. Yellows are yellow because they is less, or no, blue. Blue is a problem as it is not particularly useful for readability, and blue can be detrimental in some cases as a major component of glare.

All this is demonstrative of the very nuanced and complicated nature of human visual perception, and the very real need for a robust and seamless user personalization paradigm.

Blue in dark themes needs to be lightened to have enough perceptual contrast;

Pure blues and pure reds should be the darkest of a color pair. To use a blue or red as the lightest color, substantial green needs to be added. This is because green is the primary majority component of luminance, and ample luminance contrast is what is required for readability.

For readability, achromatic luminance contrast is the best practice.

I think yellow should be lightened to reduce overstimulation. On light backgrounds, yellow and red can be darkened to brown or brick-red. These sorts of plain-language instructions--de-saturate vibrant colors to improve contrast and reduce over-stimulation--could pair well with the APCA, or the APCA could penalize excessive over-saturation in a way similar to how it penalizes excessive contrast. I'm not sure the latter is a good strategy, so I'm leaning towards the former now.

The reality is more complicated than a mere consideration of saturations, and this is an under-researched area, and one under consideration for future research.

In a nutshell: I think the APCA does a good job flagging low/high contrast, but in isolation this could incentivise autism-unfriendly over-saturated yellows in dark backgrounds. Companion documentation describing how "contrast isn't all their is to accessible colors" or a revision to APCA could work.

There is more going on over at APCA than I can discuss publicly, but I'll mention that I personally am neurodivergent, in addition to my low vision issues, so these are topics that garner significant priority in my research focus.

The first goal however is to cure the serious problems in readability, and readability is a matter of spatial frequency of stimuli driving the need for adequate achromatic luminance contrast.

I do have some preliminary research demonstrating that high saturations create issues for fluent readability, though the editors of WCAG 3 do not want any of the new research I am creating to be placed into WCAG 3. This is one reason that I suggest that these comments be tracked at the APCA repo. The scope of APCA is larger than WCAG, and the corporate sector research interest is gaining momentum—you can expect to see a lot of exciting work in the coming years emerging from the independent research group.

I filed the issue here, since I think that explicit guidance on autism- and overstimulation-friendly colors could belong in the WCAG.

You might also want to be involved with the COGA group's supplementary guidance, they are more focused on the kind of issues you mention, and the supplementary guidance from the subgroups is usually a more appropriate place for exploring some of these nuanced aspects of accessibility.

Thank you again for your comments and feedback.

Seirdy commented 2 years ago

I was misinformed; I was using the one built into Chromium's DevTools, which doesn't flag excessive contrast. I've since used the online version to much better results. Great work!

I do think that it's worth remembering that yellow is a "harsh" color, and can cause overstimulation if it isn't de-saturated. It doesn't help that it's associated with warnings and errors. Blue in dark themes needs to be lightened to have enough perceptual contrast; I think yellow should be lightened to reduce overstimulation. On light backgrounds, yellow and red can be darkened to brown or brick-red.

These sorts of plain-language instructions--de-saturate vibrant colors to improve contrast and reduce over-stimulation--could pair well with the APCA, or the APCA could penalize excessive over-saturation in a way similar to how it penalizes excessive contrast. I'm not sure the latter is a good strategy, so I'm leaning towards the former now.

-- Seirdy

Seirdy commented 2 years ago

In a nutshell: I think the APCA does a good job flagging low/high contrast, but in isolation this could incentivise autism-unfriendly over-saturated yellows in dark backgrounds. Companion documentation describing how "contrast isn't all their is to accessible colors" or a revision to APCA could work.

I filed the issue here, since I think that explicit guidance on autism- and overstimulation-friendly colors could belong in the WCAG.

-- Seirdy

Myndex commented 2 years ago

Hi @Seirdy

As you know I do agree with much of this, it was presented in the text the Visual Contrast group developed for WCAG 3, and it is mentioned at least tangentially in the WCAG3 FPWD though some of the topic was deleted or reduced by the editors before publication in the interest of brevity.

Nevertheless, as you can see on the SAPC research tool, the use cases and contrast maximums are part of the current active research.

Yellow is tricky, as it is essentially white with the blue removed, and blue is a significant component of disability glare, so for many, removing blue is a good thing.

Next, we need to clarify if we are talking about the aspects of highly chromatic (high colorfulness) colors resulting in over-stim, vs the component that stems from very high luminances.

Very often what is perceived as "too much contrast" is actually "too bright of a display" and this certainly translates to yellow as in #ffff00 which is really too high in luminance for elements in direct view (i.e. text or a text background).

And this really transits into the significant need for real user personalization, and the technology to support user personalization is quite lacking today.

Seirdy commented 2 years ago

Weird, I sent these responses months ago but they only just showed up.

Basically, for dark themes, blue and yellow have very different problems but very similar solutions:

Blue is too dark for dark-theme foregrounds/light-theme backgrounds, hurting perceptual contrast. If you use blue in these situations, you should de-saturate it by increasing the proportion of other channels (red and green) without exceeding your maximum lightness contrast threshold.

Yellow is too harsh for dark-theme foregrounds/light-theme backgrounds, triggering overstimulation across a range of neurodivergencies (notable some forms of autism and ADHD). If you use yellow, you should de-saturate it by increasing the proportion of other channels (blue) without exceeding your maximum lightness contrast threshold.

Despite having the opposite challenges, they both need to be "whitened". I was just hoping for some sort of non-normative guidelines to push designers in that direction, rather than the status quo of "make the contrast calculator spit out the right number, and you're done with color accessibility". That kind of simplistic thinking is what we should try to move away from in WCAG 3, especially given the new focus on COGA, and APCA is just a (truly excellent!) piece of that larger picture.

So yeah. Feel free to close this issue if it's already been decided.

-- Seirdy (https://seirdy.one)

Seirdy commented 2 years ago

Also, regarding personalization: although I agree, I also think it's really important to make defaults maximally inclusive. Fingerprinting-averse users, people borrowing another device, and people under overly-strict enterprise policies are unable to fully leverage personalization. Tor Browser users come to mind.

If you use assistive technologies, you're probably already a bit fingerprintable; small low-entropy hints make all the difference when you've already been determined to be part of a small corpus. Personalization is important and useful; however, in the spirit of progressive enhancement, we should only fully rely on it if we absolutely must.

Slight tangent regarding the Tor Browser:

When optimizing for Tor users (e.g. on a hidden service), I'd rather stick to the smallest set of mutually-exclusive personalizations possible and instead support adaptations that can't be fingerprinted without JavaScript. For instance, my default color scheme uses user-agent-supplied default colors; I'm not aware of a way to detect non-default UA colors on the Tor Browser's "safest" mode (feel free to correct me; I just asked on the Tor IRC channel).

Sorry for veering off topic; I have a negative gut-reaction whenever personalization comes up. I think it's unfair that disabled users who rely on personalization can't be anonymous online due to their disabilities, and the prevalence of fingerprinting libraries that use their disabilities and personalizations as de-anonymization vectors.

-- Seirdy (https://seirdy.one)