Everyone uses them: Green, yellow (or orange), and red. Designers use them in data visualization, we use them in buttons, we color text and icons with them and put them into alerts. They are often used in crucial moments, when we are announcing success, or breaking bad news. We abuse them, too, using them to draw attention where they aren't relevant. What we don't do, far too often, is make them accessible.
A significant minority of users are colorblind, and most of those have red-green colorblindness. Since 2011 I've had to solve for color accessibility in important interactions, such as alerts for patient vitals or quality of patient care. Here are some best practices I've picked up along the way, as well as my personal template for a usable, accessible traffic color palette.
Use icons as well as color
You may design a beautiful, colorblind-friendly palette, but it never hurts to reinforce the message. Instead of changing text to red or green, put a differently shaped red or green icon next to the text. That way, even if you have no control over your color palette, or the chart has been printed in black and white, or your user sees only in grays, you've made your point.
Case in point: Excel. Excel offers icons in traffic light colors to help tell your data story. Make sure you use the differently shaped icons! This is why:Deuteranopia and protanopia are two common types of red-green colorblindness. Testing your colors against them will optimize for most of your users, but icons help seal the deal. Adobe's PhotoShop makes it easy to test for these two colorblindness types, and in fact made the graphics in this post possible. (In PhotoShop, go to View → Proof Setup to see this.)
While the above icons from desktop Excel 2013 didn't work very well, I have to give a shout-out to the Office 365 team. These Excel icons are excellent, and the colors work will for both deuteranopic and protanopic users.
Don't trust preset color palettes
The most important accessibility question when looking at your reds, greens, oranges, and yellows is, "Will colorblind users recognize this color when they see it by itself?" Don't trust the people who created your framework to have thought of this. Check it out for yourself.
There are many extremely useful frameworks and boilerplates online. Each meets many needs, but not all have had the time to optimize their colors for colorblindness. Take a look at the three examples below.
So, what to do?
A traffic color template
I've done a lot of data visualization color work over the years, and a pattern has emerged that I find helpful. I'm offering it here, in the interests of making more data more usable.
Let me repeat:
This works for several reasons.
- Using yellow instead of orange makes it less likely your "warning" color will conflict with your green to colorblind users, or look too much like your red. All the framework examples above went with orange, and look where it got them: in a blog about poor color accessibility.
- Using a light, medium, and dark shade sets them further apart.I like medium green and dark red, but you can swap them if you like.
- Using a warm green and a cool red, or a cool green and a warm red, differentiates even more. Just don't have both cool or both warm.
This provides a good springboard for your status palette work. If you have Adobe PhotoShop, try the View → Proof Setup options to verify your choices.
That's it! Thanks for reading.
Cross-posted and slightly updated from original LinkedIn post.