Regarding Colorblind and Reading
Praise and comments on “Ultimate Guide for Designing with Contrast”
This is a great article Vikalp on the use of visual contrasts in design. I really appreciate that you delved into contrasts beyond light and dark, and are including size and spatial relationships.
I have two comments I'd like to offer. First regarding color vision deficiency (CVD aka colorblind) and reading. All visual users need ample achromatic luminance contrast for good reading, in otherwords lightness/darkness contrast without regard to color as in hue or colorfulness.
CVD vision has the same or better luminance contrast sensitivity as standard vision. The one exception is protanopia—because protans are insensitive to reds, they see colors using red as "darker", the implication here is when they see red against black they have a substantially reduced contrast. Which is why reds, oranges, and purples against black are a generally bad design choice.
You also mentioned WCAG2 contrast specifications. Unfortunately WCAG2 contrast is significantly flawed, and does not consider the most important drivers of contrast perception, those being spatial characteristics, particularly font weight or line thickness.
For body text for instance, 4.5 to 1 is grossly inadequate, and even 7:1 can be insufficient depending on the font and other design characteristics. WCAG2 contrast cannot calculate for dark mode, so when one of the colors is very dark or black, the contrast reported can be incorrect by as much as 250%, and if a designer uses the minimum numbers as calculated, they can have an unreadable result. Independent studies using thousands of pairs of randomly selected colors have shown that WCAG2 contrast passes 47% of pairs that should instead fail.
Paradoxically, 4.5 to 1 or even 3:1 can be more than needed, such as for large-block areas of color, or in cases where the polarity is white text on a color background. On this last point, we find where WCAG2 contrast actually makes contrast worse for those with color vision deficiency. For instance, consider a background orange `#F60`, when paired with white text, WCAG2 contrast fails this pair at 2.9:1, but when paired with black, WCAG2 contrast passes this at 7:1.
Yet the white on orange is easier to read, and the black on orange is harder to read, especially for CVD, and protans in particular. Recall earlier I pointed out that protan in particular see reds as darker? So reds, oranges, and purples, when paired with a black color, become harder or even impossible to read.
I mention this to underline the importance of not relying on WCAG2 contrast results.
Thank you for reading,
Andy
Andrew Somers
Myndex Research
W3C Invited Expert
Opinions are my own and do not necessarily reflect those of the W3C.
The facts on the other hand are a matter of prima facie evidence.
Supporting article with references:
“The Realities And Myths Of Contrast And Color”
