Myths of Color Contrast Accessibility | Hacker News Reader

Myths of Color Contrast Accessibility

uxmovement.com

48 pointslaurentdc45 comments

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...

If you are using only hue to differentiate colors, you're making a mistake. Use text, a pattern, hover text, anything else.

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.

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.

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.

That is not in the article itself, is it one of the sources linked?

I've never understood if there are really people who commonly confuse red and green, or if others are making that assumption because it's commonly called "red green color blindness", but that assumption seems so ubiquitous, it makes me feel like I'm misunderstanding something. I'm red-green insensitive, and in reality that's exactly how it manifests, not as the inability to distinguish red from green. It's what you'd expect: Purples look more blue, greens look more yellow. That's (mostly) it.

There definitely are people who confuse red and green, I know one. He really hates all those battery chargers that change color from red to green when they finish charging because he cannot distinguish them at all.

Yep, they exist. I'm one of them.

When you see either red or green in isolation, does it take you longer than usual to tell which it is? It does for me. It's pretty rare that I simply can't tell at all, but it does happen, and it's common that it takes me multiple seconds to figure out which it is. The little red/green leds that the sibling comment mentioned can indeed be particularly shit.

The purple thing sounds familiar to me. If you take blue and add red or green, it can be very difficult for me to tell which it is. That was my earliest issue with colors, I got in trouble in school for mixing up bluegreen and purple.

There do exist some pretty detailed tests for exactly which type of colorblindness you have if you're curious, though I'm not sure if they can be done reliably on a non-calibrated monitor.

When 'color contrast' is mentioned he is referring to the example with the toggle tokens, with widely different brightness for the active (blue) and inactive (light gray) states. I suggest re-reading the article, since the author agrees completely with you - your last sentence is a straight paraphrase of this:

> If you’re using competing color hues to differentiate states, you need another visual cue besides color. But if you’re only using color contrast to differentiate states, it’s likely accessible to color blind users.

I am red-green colorblind and I actually thought the article nailed it in my case. Don’t depend on differences in hues, but use differences in contrast (saturation and brightness). If UI folks followed this rule I’d be good.

Aside: Last time I was in Spokane some genius decided to turn the light signals sideways. I had no way to tell whether to go or stop w/o watching other.

I think that's the point the person you're replying to is trying to make. The author nails it for red green color blindness, but fails for most other forms of color blindness

> 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."

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.

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-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.

> 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 mean, how scalable is that in the long run?

Every average obscures a bag of unknown causative factors that we have yet to tease apart.

As our medical knowledge increases and the number of conditions we can diagnose rise, the 'lowest average for each condition' monotonically decreases as a simple mathematical fact.

Without an automated solution to making things accessible to every condition, designers and implementors will be buried under a mound of individual cases.

There are several known conditions. Each will perceive things differently. For any color combination each group of people should see it as high contrast. If a group that is only 1 percent of the population cant read some color scheme it may still be considered fine If their perception is averaged in with everyone else.

Come to think of it, someone should have already done the work and color sets should be published somewhere.

And yet I see grey text all the time. In fact, your own comment looks grey to me now.

Touche! But grey text on HN is arguably harder to read due to the lower contrast.

I think there's a middle ground: use a better metric, such as CIE ΔE 2000

Are you suggesting that the black text on blue background in the article is easier to read for certain low-vision individuals, while the white text on blue background version is easier to read for normal vision individuals?

I have no data about this. It seems plausible, but it feels unlikely according to my intuition. To me it seems more likely that their naive algorithm for contrast ratio (which is based on their formula for relative luminance) doesn't match human perception in some cases. Color perception is complicated.

https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-rat...

https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativelumi...

The black definitely is easier to read for me. I don't mean which 'looks better' to me but in fact which is easier to read. You can test what someone with lower vision would prefer by looking at that example and closing a laptop screen to 40* or so. Which one can you still read?

I'm not talking about aesthetics. I'm very nearsighted, and when I take my glasses off I can definitely read the white text from a further distance than the black text. But I know there are different types of vision issues, and I don't question that the black text may work better for some. I would just question an algorithm that claims that the black text is better in general than the white.

No, the black text on blue background is hard to read for everyone, but is overrated by the WCAG’s mediocre heuristic because human visual response to light intensity is not actually logarithmic, but closer to a square root. (Under a particular level of light adaptation; if you allow your eye to adapt for 30 minutes you can move the response curve up or down to see in very dim or very bright conditions.)

It would be better to come up with an estimate of plausible ranges of screen brightnesses and a plausible range of surrounding contexts, and then use a real color appearance model to decide on visual contrast at the extremes of those plausible scenarios.

But whoever designed the WCAG guideline was either not an expert in human vision or perhaps thought that would be too complicated to use a model which more closely approximated perceptual responses.

The WCAG guideline should be seen as nothing more than a loose suggestion, with lots of false negatives. That is, if it says something is illegible, then it should probably be changed. but if it says the contrast is okay, then that should be checked by a better model (or human inspection).

Both white-on-medium-blue and black-on-medium-blue buttons are inaccessible and should be avoided if possible.

Try holding a piece of paper over them, so you can only review each independently.

In isolation, for me, the white on blue, has contrast bleed which makes the text fuzzy.

Again, in isolation, the black on blue is much sharper.

Together however, when presented side-by-side, the black on blue feels to be lower contrast. It's almost like my brain is using the black on blue to help compensate the weakness of the white on blue.

Is it doing perceptual color calculations in sRGB instead of LAB? No wonder the permitted contrast ratios don’t match perception.

Human perception of brightness is almost entirely cued off green levels. #0000FF (ie full blue) simply isn't very bright. #0000FF contrasts far far far more strongly with #FFFFFF than it does with #000000. This is true even for (most types of) color blind individuals. There might be a color blindness that cues hard on blue levels but I can't speak authoritatively in that area.

If you define brightness as (r+g+b)/3 you're doing it wrong. NTSC defines brightness something like .7g + .25r + .05b. (I forgot the exact numbers, but it's really extreme) JPEG assumes something a lot less extreme, but still >.55 green.

Source: I had to implement a saturation function for work and assumed brightness is (r+g+b)/3 and it looked like fucking garbage. In fact image/video compression is full of hacks like this. 4:2:0 is dominant in the video compression space for a reason. Human brains simply don't give a fuck about the color blue.

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.

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.

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.

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-a...

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.

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.

Thank you! I came here to say this same thing. Who cares what your twitter survey said?

It's not wrong. It seems right to me. The survey also included those with colorblindness.

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.

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.

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!

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.

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 :)

"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.

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.

Not that I've found, but you may find Color Oracle[1] to be a helpful arrow in your quiver.

[1] http://colororacle.org/

Sim Daltonism is another:

https://michelf.ca/projects/sim-daltonism/

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.

> 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.

Reply on news.ycombinator.com