Designing Accessible Color Systems | Hacker News Reader

Designing Accessible Color Systems

stripe.com

167 pointsboyter46 comments

I built similar perceptually uniform color library: 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

I also built something that tangles with color, contrast and accessibility: http://strapless.io

I think the fun comes in working around the challenges you mentioned. The standards are sometimes lacking design-wise in what's allowed but they're pretty good at ensuring readability across devices.

I've been messing around with the Turbo colormap, another new one that seems really useful for UI design, and solving these problems in particular: https://rexriepe.github.io/tpcs/

depending on how you look at it, this is either a really interesting or really frustrating problem. the limitations of screen technology and the way we perceive colors puts a lot of awkward constraints on how we can represent and transform them. I like to show people this page as a primer on why color is more complicated than they might think: http://www.hsluv.org/comparison/

the answer to the question "what is the best color space?" can only be "for what?".

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

I'm pretty sure this only affects protan(omaly/opia). The green and red cones along with the rods all play a roll in determining the brightness of any colour. When the red cone is shifted towards green, then all wavelengths to the right of that will be darkened. I thought tritanopia would experience this too since the blue cone is also an edge-of-the-rainbow cone, but apparently the blue cone plays a very small roll in detecting brightness. Therefore, a bright blue colour would appear to to someone with tritanopia as yellowish white, since it is nearly equally detected by the green & red cones.

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

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.

Matplotlib's developers talk about it here: https://youtu.be/xAoljeRJ3lU?t=738

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.

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.

I took one look and immediately checked the comments to see if someone else had already brought this up. I looked at the images then, but reading the text itself was too much effort for me.

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

Strong +1

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

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.

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.

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

We’d love to be able to share it in the future! However, there is some non-trivial work to do to make it generally useful to other teams. In its current state, the tool is limited to solve some very specific problems and makes a lot of assumptions about our color system.

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/

[2] https://couleursapp.com/

As a digital product designer, my go-to Mac status bar app for this is Contrast: https://usecontrast.com

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.

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.

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/

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.

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

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.

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

My suggested test used the gray for background, with black text or white text over it.

I can't trust the math, because I don't know how they derived it. Well the conversion from sRGB to linear RGB and from there to luminance is straightforward and standard, but the formula for contrast is a real mystery. Where'd those magic 0.05 constants come from? And does it really not make a difference if it's light on dark vs. dark on light?

The WCAG uses a pretty poor heuristic. But it’s better than a clueless person’s personal guess (which is what too many people rely on instead).

I most often use Lea Verou's Contrast Ratio site, in part because one can use colors in different formats (by name, hex, rgb(), hsla(), etc.)

https://contrast-ratio.com

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?

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.

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.

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

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.

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

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

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.

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]

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.

> The "Differentiate without color" option on macOS and iOS comes to mind.

As far as I can tell, that historically has affected precisely one thing on macOS, and that's the "Available/Busy/Away" indicator in Messages (which is now gone, so I guess it does nothing now…)

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.

Reply on news.ycombinator.com