- From: Andrew Somers via GitHub <sysbot+gh@w3.org>
- Date: Tue, 24 Nov 2020 14:30:23 +0000
- To: public-css-archive@w3.org
> _It would be nice to get some input from someone who knows why_ Hi @ZekeMedley and HI @frivoal > _One reason why *low contrast* gets chosen is that for some people with dyslexia, high (or even normal) contrast gives the impression that letters are shining / glimmering, which makes things hard to read. Low contrast (and / or light-on-dark) mitigate that effect._ "Reduced" contrast for user needs due to ocular glare, or even neurological, or cognitive, are often related first to excessive total luminance relative to the eye's light adaptation level. The easy example is facing headlights at night. But on displays the "excessive" contrast is more related to displays set too bright for the environment, and in particular _large bold stimuli_ at a very high contrast. **BUT:** _not necessarily body text_, as very small thin fonts need very high luminance contrast to offset the low perceived contrast caused by the high spatial frequency of the small thin font. That is, YES use caution with excessive contrast with very bright displays and big bold headlines or elements, but don't cheat the readability of a column of body text. In short: Headlines larger than 48px, restrain contrast to APCA 120 L<sup>c</sup>. If also bold, under 100 L<sup>c</sup> is a good idea. But 16px body text? 120-125 L<sup>c</sup> is ideal. (That's about WCAG 11:1.) Another aspect of this is **how much detail is there in the BLUE channel?** Here on _"terrible-for-accessibility-GitHub™"_, the bright white BG and dark text is an APCA value of 131 L<sup>c</sup> which is equivalent to WCAG 14:1 — but it's not the "contrast" that makes it difficult, it's the high luminance of the BG (96 Y) relative to adaptation if your monitor is set bright and the room is too dark. When I'm at sites like this I either turn down the monitor's peak luminance level, or use the dark mode extension and invert the colors. ### The Blue Trick When designing for readable columns of body text, here's a trick to make it a less glarry: If the BG uses a lot of blue (and a white background uses maximum blue), then **add _BLUE_ to the TEXT color** as this reduces the detail in the blue channel, reducing glare & chromatic aberration. ### Examples of Blue Detail Reduction: Using the [APCA Contrast Calculator ](https://www.myndex.com/APCA/) let's consider two color pairs.   Depending on the condition of your eyes, you may find the top version font sample squares to have a "scintillating" effect. The background has zero blue, and the text is _only_ blue. There is good contrast at 105 L<sup>c</sup> but this is a bad color combo for text due to glare and chromatic aberration, and the very bright BG. In the second example the BG is lower luminance (81Y vs 92Y) and more importantly, the blue text has the exact same amount of blue as the BG, `#008` and `#ee8`. This means there is literally no detail in blue, just a flat dark blue field. And yet the contrast here is higher at 120. In the first example, the blue detail level is `#00F` against a `#FF0` BG. Here are larger examples, and the kind of very large elements where excessive contrast should be cautioned against:   But notice again that it's not the contrast amount so much as the higher luminance, and the interfering saturation and side effects of glare/CA that makes the first example problematic. if you have young eyes, you may not notice the glare or scintillation effects in the first example, but I can tell you that the first example is difficult for me to look at. **Side Note:** If you're wondering why the first blue/yellow is reporting a lower contrast but seems "more vibrant" it is in part because APCA is interested in **_critical contrast for best readability_**, and so this implementation discounts chroma/saturation/hue contrasts and reports only calculated luminance contrast. It is ample luminance contrast that is needed for best readability, with hopefully minimal interference from opponent colors, saturation, CA, glare, etc. Cheers, Andy -- GitHub Notification of comment by Myndex Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5224#issuecomment-733010361 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 24 November 2020 14:30:27 UTC