
Designing Accessible Color Systems - boyter
https://stripe.com/au/blog/accessible-color-systems
======
neilpanchal
I built similar perceptually uniform color library:
[https://github.com/neilpanchal/Chroma](https://github.com/neilpanchal/Chroma)

The sad part is that we have all these colors available in the physical world
but representing in sRGB (or even Adobe RGB or DCI P3) space takes away all
the fun. We have a narrow space to work within and it poses limits to what you
can do. Vast majority of monitors in the world are barely capable of
representing sRGB space, and even if they are, calibration is another issue.
You can employ all kinds of science in representing proper colors but if the
end user's calibration is not good, all bets are off.

Colors are a problem for interface design (and accessibility), it becomes a
real challenge when dealing with quantitative data and build perceptually
uniform colormaps with accessibility considerations, here is an amazing
presentation of Matplotlib's new colormaps:
[https://www.youtube.com/watch?v=xAoljeRJ3lU](https://www.youtube.com/watch?v=xAoljeRJ3lU)

~~~
username90
> build perceptually uniform colormaps with accessibility considerations

That is impossible, color-blind people wont see them as perceptually uniform
since the area with the color they can't see gets a lot darker. For example I
can't see red text on a certain kinds of black background, as in I don't even
recognize that there are letters there. I remember being on a presentation
where the author apparently liked to play with colors, and several of the
screens were just blank to me I didn't even know that I there were letters
there I couldn't see.

~~~
pcmonk
> the area with the color they can't see gets a lot darker

Interestingly, for me (deuteranomolous) the colors I can't see often seem
lighter. For example, green traffic lights appear white. I assumed this is
because I can still see the light, it just doesn't get interpreted as green,
but I don't know whether that's true.

~~~
username90
Green lights are white to me as well, I guess they have a decent chunk of blue
in them and people call them green due to the lack of red. (I see blue + green
as white since I don't see red)

But if you see it as white as well then I'd expect your problem to be with the
color red and not the color green.

------
kirillcool
Ironically, even though the contrast ratio of the body content is technically
passing the contrast threshold, it's unpleasant to read. It's the combination
of the lighter shade of grey, small font size _and_ the thinness of the font
glyphs themselves.

~~~
wilsonminer
Great point! That's one of the reasons we also changed the fonts we use in our
product interfaces around the same time, including removing any usage of
`light` font weights. We haven't yet made a similar change to our blog design,
but it would be a solid improvement for legibility.

------
saagarjha
> We built a web interface to allow us to visualize and manipulate our color
> system using perceptually uniform color models.

Is this tool available anywhere?

~~~
hokumguru
Lyft built and released a similar tool recently for picking accessible colors,
there was a HN post about it last month

[https://www.colorbox.io](https://www.colorbox.io)

~~~
jacobolus
Unfortunately the Lyft one is based on a much weaker understanding of color
science and a much lazier implementation based on poor choice of basic color
model, which results in poor output.

Kudos to Wilson Miner and Daryl Koopersmith for one of the few non-bullshit
color picker articles to pop up here.

~~~
jacobolus
Edit: Sorry to any Lyft folks reading. “Lazier” is not really a fair or kind
description. I was in a somewhat grumpy mood earlier.

In more neutral language: using non-perceptually-relevant color spaces leads
to dramatic distortion of color relationships, and ends up misleading humans
trying to interpret them.

It’s great to see the Stripe team here recognizing the problem and attacking
it in a more principled way. Let me echo calls for publishing the tool if
possible. I’ve wanted to use a similar tool since at least 2006, but all the
tools along these lines I have built for myself have been very hacky and not
suitable for public consumption.

~~~
Vinnl
A bit off-topic, but thanks for getting back to this post with this follow-up.
We (myself included) do this too often online, assuming the people we're
talking about are not reading along, even though that does happen.

(I'm not from Lyft by the way, to clarify. Just a random reader.)

------
guessmyname
This article reminds me of Contraste [1], a free little app for macOS that
allows you to quickly know if a combination of colors, for a text and a
background, passes accessibility thresholds defined by the W3C, and thus is
accessible to users with visual impairments. The app was made by Laurent
Baumann, who is also the author of Couleurs, a free color picker, for macOS as
well.

[1] [https://contrasteapp.com/](https://contrasteapp.com/)

[2] [https://couleursapp.com/](https://couleursapp.com/)

~~~
mark-r
My experience with the W3C guidelines is that they don't work well in the real
world. I think their definition of contrast is not quite right.

~~~
extra88
What do you mean, do you think 4.5:1 is an insufficient contrast ratio? I
think that's recognized and why level AAA requires 7:1.

~~~
mark-r
No, I mean the method of calculating contrast ratio does not reflect reality.
Take a background of #969696, a medium gray. According to the formulas laid
out in WCAG 2.0 [1], white text has a contrast ratio of 2.96 and black text
has a contrast ratio of 7.1. So clearly black is better, right? Try it for
yourself and tell me if the difference is as stark as the numbers suggest.

Of course this means nothing if you're legally mandated or simply told by your
boss that you must follow the standard.

[1] [https://www.w3.org/TR/WCAG20/](https://www.w3.org/TR/WCAG20/)

~~~
extra88
The white and gray don’t look that bad to me but it’s not for me, it’s for
people with various vision impairments. Ignore your lying eyes, trust the
math.

Also, to me the superiority of using black is more apparent if the gray is the
background color.

~~~
csande17
A better example is when you have a #FF0000 red background. WCAG says you
should use #000000 black text on it, but #FFFFFF white text is actually more
accessible to people with color deficient vision[1] and, to my eyes at least,
reads more easily and has more contrast.

[1]
[https://accessibility.psu.edu/color/colorvisiondetails/#RK](https://accessibility.psu.edu/color/colorvisiondetails/#RK)

~~~
jacobolus
Please don’t use a #FF0000 background under any circumstance.

It is an extremely colorful medium-lightness red which will be somewhere
between unpleasant and physically uncomfortable to look at (not to mention
illegible) irrespective of the foreground text color.

~~~
csande17
Yeah, #FF0000 was just an example. The problem also happens with other shades
of red, like #F44336 from the old Material Design palette.

------
heftig
In my brief dive into colorspaces I got the impression that CIELAB isn't
actually that uniform and there are better spaces available, such as DIN99o
(actually DIN 6176). Is this right?

~~~
raphlinus
CIELab is not perfect, but is probably Good Enough, especially for the kinds
of use cases as described in this article. One of its main flaws is lack of
hue constancy, particularly in blue.

There are any number of colorspaces that have been proposed that are better.
Some are complex and ad hoc, such as two different releases of CIECAM. Others
are relatively simple, such as Jzazbz. IPT also comes up a lot. I think the
issue is that there isn't anything resembling consensus on which of these
"more perceptually uniform" color spaces we should use. So a bunch of efforts,
including freieFarbe, use Lab.

~~~
darylkoop
Precisely this—while we only mention CIELAB in the post, we also tested other
perceptually uniform color spaces in addition to Lab (and can switch between
them in the color tool). In particular, we also tested CIECAM02 extensively.
We found that both were sufficient for the level of precision we needed and
that Lab’s simpler lightness calculations are more closely aligned with how
WCAG contrast ratios are calculated. We’re definitely open to testing other
color spaces in the future as we continue to refine our color palettes.

~~~
jacobolus
If you want something reasonably simple and fast to compute but which has been
optimized to fit available experimental data better than CIELAB you could try
[https://observablehq.com/@jrus/jzazbz](https://observablehq.com/@jrus/jzazbz)

------
120bits
I have always been a fan of stripe product launch page. The text is clear and
to the point, the graphics/animations are engaging, not annoying pop-ups, the
color scheme is not hurting my eyes. The best UI/UX experience I have of any
website. I remember the web page which had game of life as the background.
Really geeky yet fun to watch. Also, stripe's REST API documentation is just
too good.

------
theboywho
This looks like a good basis for a color scheme for code (vscode, terminal,
emacs, etc), anyone working on this ?

~~~
djmashko2
That would be amazing actually - I frequently run into situations where some
combination of colors doesn’t have enough contrast in my editor.

------
visarga
How many distinct colours can I use in the same image and still be able to
tell apart when the coloured boxes might be arranged in any order?

I'm trying to come up with a colour scheme that supports categorical labelling
for as many categories as possible - that means I want the colours to be
distinct from one another, to be able to recognise each category with ease,
but at the same time cover as many categories as possible. With <10 categories
it's easy, with 20 I struggle.

Can anyone make a suggestion? I am not interested in uniformity of lightness
or linear progression, but maximal separability between nuances.

------
azdavis
Great stuff.

Do Stripe products make affordances for people who are color-blind? For
instance, do "error" notifications always contain an icon for "error" as well
as a red background/text color? The "Differentiate without color" option on
macOS and iOS comes to mind.

[disclaimer: past Stripe intern]

~~~
wilsonminer
Yes, it's part of our internal guidelines for color usage in product
interfaces that color should never be the only visual means of conveying
information. There's a lot of different ways that can be applied in different
contexts, but it's something we discuss fairly often as a team when reviewing
designs.

------
jcampbell1
One trick I found that youtube and google use is to make the light grey text
not #777 (min allowed contrast on white background), but rather like
rgba(70,70,70,.8). The alpha lightening makes it have enough contrast even if
presented on a light grey background.

