11 ms·

Myths of Color Contrast Accessibility

48 points by laurentdc 7y ago

cjensen 7y ago
The very first example is wrong. It tries to debunk a WCAG standard for text contrast using a survey of normal people. The point of the WCAG standard is to accommodate non-normal people, so any survey of normals is entirely meaningless to the discussion.
- mark-r 7y ago
  The formulas for computation of contrast are not influenced by non-normal eyesight considerations, it's only the acceptance thresholds that are affected. The computation of lightness in particular is based on weighting for average sensitivity to RGB. I've been dissatisfied with their formula for a long time, even though I have normal vision myself.
  - zokier 7y ago
    The comment from Andrew Somers[1] there is well worth a read. The salient quote here is > The method used for the WCAG 2.x contrast is, as I’ve discussed elsewhere, inconsistent with human perception models [1] https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/#comment-92567 https://uxmovement.com/buttons/the-myths-of-color-contrast-a...
    - mark-r 7y ago
      Thanks for pointing that out, I missed it. It's refreshing to hear from someone who seems to know what they're talking about; I've looked at the WCAG document itself and haven't found a lot of justification for their recommendations.
      - jacobolus 7y ago
        You should think of it as a weak heuristic pointing in vaguely the right direction, rather than a careful scientifically validated metric. Similar in its technical sloppiness the “color rendering index” advertised on light bulbs.
- chadlavi 7y ago
  Thank you! I came here to say this same thing. Who cares what your twitter survey said?
- james_s_tayler 7y ago
  It's not wrong. It seems right to me. The survey also included those with colorblindness.
  - zdragnar 7y ago
    When the two are side by side, the White text appeared easier to read. When covering one up and only looking at the other, then the other way around, the black text was certainly crisper for me, and someone else here pointed it out as well. As such, I wonder how the survey was conducted. It may or may not be useful at all otherwise. One thing that also seems to intuitively make this seem to make sense- driving at night, it is much harder to read gas prices from the big light signs when green is used than when red is... The lighter (and or brighter?) green simply bleeds over much more.
  - cjensen 7y ago
    The second example did... but not all colorblindness is equal. What you want is something readable by as many people as possible. The goal is not to make the most people happiest.
robbrown451 7y ago
"Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation." Or....fix the algorithm. Their example seems like a perfect example of a broken algorithm.
gnud 7y ago
> If the majority of your user base is 70 or older, meeting the AAA requirement is beneficial. Discriminating against people with impaired vision is OK if you do it because you tried to discriminate based on age.
sarah180 7y ago
This article is recklessly ill-informed about color blindness. It is not remotely true that red and green are the only commonly confused colors among people with the common forms of colorblindness. For more detail, see for this link for example. https://www.color-blindness.com/2009/01/19/colorblind-colors-of-confusion/ https://www.color-blindness.com/2009/01/19/colorblind-colors... If you are using only hue to differentiate colors, you're making a mistake. Use text, a pattern, hover text, anything else.
- deleted 7y ago
  [deleted]
- extrapickles 7y ago
  That article has actively harmful advise for people who have my type of color blindness (red deficient and green at the wrong wavelength). Their advice for red-green color blindness is basically to only use greens and yellows which are pretty much impossible for me to tell apart. The best is when people make sure there is something other than just color to tell something apart. If you are making a game, the best is to have a color wheel to pick the colors for things (UI elements, friendlies/enemies, etc) as most forms of baked-in colorblindness support tend to just make things worse for me.
  - ricardobeat 7y ago
    Where is the recommendation for using green and yellow? I can't find that. I understood the recommendation to be 'use extra visual cues', except when only 'color contrast' (basically two contrasting-brightness colors, and the color itself has no significance) is being used. I'm colorblind too and totally agree.
    - extrapickles 7y ago
      They have color charts for each type of colorblindness with lines drawn on them for sets of hues to avoid. None of these lines go through both the green and yellow colors.
deckar01 7y ago
Adding icons to color coded information helps with identification, but it is not a good source of notification. If the status icons are a field of green blobs with white checkmarks and there is one red blob with a white X, it is much less likely to be noticed by people with red-green colorblindness. I tend to use blue instead of green, because it is at the opposite end of the human-visible spectrum from red. I also try to make the visual weight of the notification proportional to its meaning. The correctness of a single field in a form is relatively unimportant. An error in a single field is much more important. In the given example I would either get rid of the check marks or make the icon green with no background to reduce its visual weight.
- ricardobeat 7y ago
  This! I'm always amused when people go to great lengths to announce how they made their color palette accessible, only to showcase some graphs labeled red and green right after :)
prashnts 7y ago
First example can be misleading. It fails to account for low-dpi displays where your nice and crisp font may render with one or two pixel width. Colors easily bleed-in in those cases.
chadlavi 7y ago
> The reason the contrast ratios failed with the white text is that it has high brightness and is on a background with high brightness. Bright text on a bright background is rendered low contrast computationally. Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation. This is so stupid it hurts. It doesn't pass contrast guidelines because bright things on bright things are hard to distinguish for low-vision individuals! It doesn't matter what you think looks better. The correct solution for the designer is to use a darker orange or blue then put white text on it. Get correct contrast AND something that subjectively feels better. The correct answer for a designer is never to go "eh, I like my version better, I'll ignore these rules."
- phkahler 7y ago
  Yep: "Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation." The entire point is that the designers eye can not possibly percieved things the same as every other person. To evaluate readability you should look not at the average rating from all users but the lowest average for each condition/group as they will be the ones who cant read it. I had to stop reading at the defense of gray text - there's no excuse for that. Ever.
  - jacobolus 7y ago
    The “gray text” on the button analyzed in the article is dark gray text on light gray background. It has plenty of contrast. https://uxmovement.com/wp-content/uploads/2019/10/cca-buttonborder.png https://uxmovement.com/wp-content/uploads/2019/10/cca-button... You might find it aesthetically inferior to black on yellow (or whatever) but there’s nothing inherently illegible about it. To the grandparent poster chadlavi: > This is so stupid it hurts. It doesn't pass contrast guidelines because bright things on bright things are hard to distinguish You are misunderstanding the author’s claims, and then responding with mean-spirited insults. Try reading the whole article again more carefully, and with an open mind. If you are confused about something in specific a person who has studied color science a bit can try to clear up any questions you have. The author is not suggesting that you should put white text on a middle-blue (or whatever) background, but merely pointing out that the WCAG heuristic for contrast is not in accord with human lightness perception. The white-on-blue vs. black-on-blue is just a demonstrative example, showing that even though white-on-blue has higher contrast according to human perception, the WCAG heuristic instead rates the contrast of black-on-blue to be higher. This happens because the WCAG heuristic assumes human response to light intensity to be logarithmic, an inaccurate model which breaks down quite badly when you have dark text on a dark background. In practice both white-on-medium-blue and black-on-medium-blue buttons have relatively low contrast and should be avoided where possible. With white text a darker background would be better. With black text a (much) lighter background would be better.
jml7c5 7y ago
Do the Chrome/Firefox developer tools have any easy way to simulate forms of color blindness and levels + types of vision loss? I'd love to see such tools front-and-center so that devs are always aware of the need to accomodate for it. My vision isn't that bad, but it's always bothersome to come across pages that don't support black-on-white text for prose. Yes, black-on-white doesn't look as svelte as a hint of gray, but it's so much easier to read.
- CharlesW 7y ago
  Not that I've found, but you may find Color Oracle[1] to be a helpful arrow in your quiver. [1] http://colororacle.org/ http://colororacle.org/
- steveax 7y ago
  Sim Daltonism is another: https://michelf.ca/projects/sim-daltonism/ https://michelf.ca/projects/sim-daltonism/
z3t4 7y ago
The most important is text size. Bigger text is easier to read. Make sure the user can resize the text. eg. no text inside bitmap images. You will probably hate me, but leave the text color and background to the default eg. don't set it. Let the user set it. Ok, so now you basically got black text on white background. But you can still play with spacing! And you can play with text size. So instead of using contrast, use text size and spacing!
steveax 7y ago
Depending on the markup, the second example in “myth 6” is flat out wrong as the author ignores one of the failure modes for color only - unless there is an accessible name on those success/failure dots, screen reader users are SOL.

48 points by laurentdc 7y ago

The very first example is wrong. It tries to debunk a WCAG standard for text contrast using a survey of normal people. The point of the WCAG standard is to accommodate non-normal people, so any survey of normals is entirely meaningless to the discussion.

mark-r 7y ago
The formulas for computation of contrast are not influenced by non-normal eyesight considerations, it's only the acceptance thresholds that are affected. The computation of lightness in particular is based on weighting for average sensitivity to RGB. I've been dissatisfied with their formula for a long time, even though I have normal vision myself.
- zokier 7y ago
  The comment from Andrew Somers[1] there is well worth a read. The salient quote here is > The method used for the WCAG 2.x contrast is, as I’ve discussed elsewhere, inconsistent with human perception models [1] https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/#comment-92567 https://uxmovement.com/buttons/the-myths-of-color-contrast-a...
  - mark-r 7y ago
    Thanks for pointing that out, I missed it. It's refreshing to hear from someone who seems to know what they're talking about; I've looked at the WCAG document itself and haven't found a lot of justification for their recommendations.
    - jacobolus 7y ago
      You should think of it as a weak heuristic pointing in vaguely the right direction, rather than a careful scientifically validated metric. Similar in its technical sloppiness the “color rendering index” advertised on light bulbs.
chadlavi 7y ago
Thank you! I came here to say this same thing. Who cares what your twitter survey said?
james_s_tayler 7y ago
It's not wrong. It seems right to me. The survey also included those with colorblindness.
- zdragnar 7y ago
  When the two are side by side, the White text appeared easier to read. When covering one up and only looking at the other, then the other way around, the black text was certainly crisper for me, and someone else here pointed it out as well. As such, I wonder how the survey was conducted. It may or may not be useful at all otherwise. One thing that also seems to intuitively make this seem to make sense- driving at night, it is much harder to read gas prices from the big light signs when green is used than when red is... The lighter (and or brighter?) green simply bleeds over much more.
- cjensen 7y ago
  The second example did... but not all colorblindness is equal. What you want is something readable by as many people as possible. The goal is not to make the most people happiest.

robbrown451 7y ago

"Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation." Or....fix the algorithm. Their example seems like a perfect example of a broken algorithm.

gnud 7y ago

> If the majority of your user base is 70 or older, meeting the AAA requirement is beneficial. Discriminating against people with impaired vision is OK if you do it because you tried to discriminate based on age.

sarah180 7y ago

This article is recklessly ill-informed about color blindness. It is not remotely true that red and green are the only commonly confused colors among people with the common forms of colorblindness. For more detail, see for this link for example. https://www.color-blindness.com/2009/01/19/colorblind-colors-of-confusion/ https://www.color-blindness.com/2009/01/19/colorblind-colors... If you are using only hue to differentiate colors, you're making a mistake. Use text, a pattern, hover text, anything else.

deleted 7y ago
[deleted]
extrapickles 7y ago
That article has actively harmful advise for people who have my type of color blindness (red deficient and green at the wrong wavelength). Their advice for red-green color blindness is basically to only use greens and yellows which are pretty much impossible for me to tell apart. The best is when people make sure there is something other than just color to tell something apart. If you are making a game, the best is to have a color wheel to pick the colors for things (UI elements, friendlies/enemies, etc) as most forms of baked-in colorblindness support tend to just make things worse for me.
- ricardobeat 7y ago
  Where is the recommendation for using green and yellow? I can't find that. I understood the recommendation to be 'use extra visual cues', except when only 'color contrast' (basically two contrasting-brightness colors, and the color itself has no significance) is being used. I'm colorblind too and totally agree.
  - extrapickles 7y ago
    They have color charts for each type of colorblindness with lines drawn on them for sets of hues to avoid. None of these lines go through both the green and yellow colors.

deckar01 7y ago

Adding icons to color coded information helps with identification, but it is not a good source of notification. If the status icons are a field of green blobs with white checkmarks and there is one red blob with a white X, it is much less likely to be noticed by people with red-green colorblindness. I tend to use blue instead of green, because it is at the opposite end of the human-visible spectrum from red. I also try to make the visual weight of the notification proportional to its meaning. The correctness of a single field in a form is relatively unimportant. An error in a single field is much more important. In the given example I would either get rid of the check marks or make the icon green with no background to reduce its visual weight.

ricardobeat 7y ago
This! I'm always amused when people go to great lengths to announce how they made their color palette accessible, only to showcase some graphs labeled red and green right after :)

prashnts 7y ago

First example can be misleading. It fails to account for low-dpi displays where your nice and crisp font may render with one or two pixel width. Colors easily bleed-in in those cases.

chadlavi 7y ago

> The reason the contrast ratios failed with the white text is that it has high brightness and is on a background with high brightness. Bright text on a bright background is rendered low contrast computationally. Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation. This is so stupid it hurts. It doesn't pass contrast guidelines because bright things on bright things are hard to distinguish for low-vision individuals! It doesn't matter what you think looks better. The correct solution for the designer is to use a darker orange or blue then put white text on it. Get correct contrast AND something that subjectively feels better. The correct answer for a designer is never to go "eh, I like my version better, I'll ignore these rules."

phkahler 7y ago
Yep: "Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation." The entire point is that the designers eye can not possibly percieved things the same as every other person. To evaluate readability you should look not at the average rating from all users but the lowest average for each condition/group as they will be the ones who cant read it. I had to stop reading at the defense of gray text - there's no excuse for that. Ever.
- jacobolus 7y ago
  The “gray text” on the button analyzed in the article is dark gray text on light gray background. It has plenty of contrast. https://uxmovement.com/wp-content/uploads/2019/10/cca-buttonborder.png https://uxmovement.com/wp-content/uploads/2019/10/cca-button... You might find it aesthetically inferior to black on yellow (or whatever) but there’s nothing inherently illegible about it. To the grandparent poster chadlavi: > This is so stupid it hurts. It doesn't pass contrast guidelines because bright things on bright things are hard to distinguish You are misunderstanding the author’s claims, and then responding with mean-spirited insults. Try reading the whole article again more carefully, and with an open mind. If you are confused about something in specific a person who has studied color science a bit can try to clear up any questions you have. The author is not suggesting that you should put white text on a middle-blue (or whatever) background, but merely pointing out that the WCAG heuristic for contrast is not in accord with human lightness perception. The white-on-blue vs. black-on-blue is just a demonstrative example, showing that even though white-on-blue has higher contrast according to human perception, the WCAG heuristic instead rates the contrast of black-on-blue to be higher. This happens because the WCAG heuristic assumes human response to light intensity to be logarithmic, an inaccurate model which breaks down quite badly when you have dark text on a dark background. In practice both white-on-medium-blue and black-on-medium-blue buttons have relatively low contrast and should be avoided where possible. With white text a darker background would be better. With black text a (much) lighter background would be better.

jml7c5 7y ago

Do the Chrome/Firefox developer tools have any easy way to simulate forms of color blindness and levels + types of vision loss? I'd love to see such tools front-and-center so that devs are always aware of the need to accomodate for it. My vision isn't that bad, but it's always bothersome to come across pages that don't support black-on-white text for prose. Yes, black-on-white doesn't look as svelte as a hint of gray, but it's so much easier to read.

CharlesW 7y ago
Not that I've found, but you may find Color Oracle[1] to be a helpful arrow in your quiver. [1] http://colororacle.org/ http://colororacle.org/
steveax 7y ago
Sim Daltonism is another: https://michelf.ca/projects/sim-daltonism/ https://michelf.ca/projects/sim-daltonism/

z3t4 7y ago

The most important is text size. Bigger text is easier to read. Make sure the user can resize the text. eg. no text inside bitmap images. You will probably hate me, but leave the text color and background to the default eg. don't set it. Let the user set it. Ok, so now you basically got black text on white background. But you can still play with spacing! And you can play with text size. So instead of using contrast, use text size and spacing!

steveax 7y ago

Depending on the markup, the second example in “myth 6” is flat out wrong as the author ignores one of the failure modes for color only - unless there is an accessible name on those success/failure dots, screen reader users are SOL.