7 ms·

Designing Accessible Color Systems

167 points by boyter 7y ago

120bits 7y ago
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.
saagarjha 7y ago
> 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?
- darkgreene 7y ago
  Strong +1
- hokumguru 7y ago
  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 7y ago
    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 7y ago
      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 7y ago
        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.)
- wilsonminer 7y ago
  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.
neilpanchal 7y ago
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
- rriepe 7y ago
  I also built something that tangles with color, contrast and accessibility: http://strapless.io 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/ https://rexriepe.github.io/tpcs/
- leetcrew 7y ago
  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/ http://www.hsluv.org/comparison/ the answer to the question "what is the best color space?" can only be "for what?".
- username90 7y ago
  > 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.
heftig 7y ago
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 7y ago
  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 7y ago
    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 7y ago
      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
      - notzuck 7y ago
        You're not smart.
kirillcool 7y ago
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 7y ago
  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.
- dkersten 7y ago
  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.
guessmyname 7y ago
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/
- tannerc 7y ago
  As a digital product designer, my go-to Mac status bar app for this is Contrast: https://usecontrast.com https://usecontrast.com
- mark-r 7y ago
  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 7y ago
    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 7y ago
      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/
      - 7y ago
theboywho 7y ago
This looks like a good basis for a color scheme for code (vscode, terminal, emacs, etc), anyone working on this ?
- djmashko2 7y ago
  That would be amazing actually - I frequently run into situations where some combination of colors doesn’t have enough contrast in my editor.
azdavis 7y ago
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 7y ago
  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.
- saagarjha 7y ago
  > 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…)
jcampbell1 7y ago
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.
deleted 7y ago
[deleted]
- deleted 7y ago
  [deleted]
visarga 7y ago
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.

167 points by boyter 7y ago

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.

saagarjha 7y ago

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

darkgreene 7y ago
Strong +1
hokumguru 7y ago
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 7y ago
  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 7y ago
    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 7y ago
      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.)
wilsonminer 7y ago
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.

neilpanchal 7y ago

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

rriepe 7y ago
I also built something that tangles with color, contrast and accessibility: http://strapless.io 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/ https://rexriepe.github.io/tpcs/
leetcrew 7y ago
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/ http://www.hsluv.org/comparison/ the answer to the question "what is the best color space?" can only be "for what?".
username90 7y ago
> 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.

heftig 7y ago

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 7y ago
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 7y ago
  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 7y ago
    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
    - notzuck 7y ago
      You're not smart.

kirillcool 7y ago

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 7y ago
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.
dkersten 7y ago
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.

guessmyname 7y ago

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/

tannerc 7y ago
As a digital product designer, my go-to Mac status bar app for this is Contrast: https://usecontrast.com https://usecontrast.com
mark-r 7y ago
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 7y ago
  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 7y ago
    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/
    - 7y ago

theboywho 7y ago

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

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

azdavis 7y ago

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 7y ago
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.
saagarjha 7y ago
> 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…)

jcampbell1 7y ago

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.

deleted 7y ago

[deleted]

deleted 7y ago
[deleted]

visarga 7y ago

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.