
Myths of Color Contrast Accessibility - laurentdc
https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/
======
gnud
> 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
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...](https://www.color-
blindness.com/2009/01/19/colorblind-colors-of-confusion/)

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

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

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

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

~~~
baddox
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/#contrast-ratiodef)

[https://www.w3.org/TR/2008/REC-
WCAG20-20081211/#relativelumi...](https://www.w3.org/TR/2008/REC-
WCAG20-20081211/#relativeluminancedef)

~~~
mzs
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?

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

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

------
z3t4
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!

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

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

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

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

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

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

