{"id":676,"date":"2018-07-23T22:28:31","date_gmt":"2018-07-23T22:28:31","guid":{"rendered":"http:\/\/www.aeoneal.com\/blog\/?p=676"},"modified":"2020-09-07T15:55:15","modified_gmt":"2020-09-07T15:55:15","slug":"beautiful-accessible-traffic-light-colors","status":"publish","type":"post","link":"https:\/\/www.aeoneal.com\/blog\/beautiful-accessible-traffic-light-colors\/","title":{"rendered":"Beautiful, accessible traffic light colors"},"content":{"rendered":"

Cross-posted from my Medium blog<\/a>.<\/em><\/p>\n

\"Gorgeous
\nAutumn leaves showing off a glorious red\/yellow\/green palette. Photo by enneafive of Flickr, under Creative Commons by 4.0 license. Links below.<\/p>\n

Everyone uses them: Green, yellow (or orange), and red. We 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\u2019t relevant. What we don\u2019t do, far too often, is make them accessible.<\/p>\n

A significant minority of people are color blind, and most of those have red-green color blindness. Since 2011 I\u2019ve had to solve for color accessibility in important interactions, such as alerts for patient vitals, quality of patient care, cloud server status, or executive sales analytics. Here are some accessibility tips I\u2019ve picked up along the way, as well as my personal template for a usable, accessible traffic color palette.<\/p>\n

Use icons as well as color<\/h2>\n

You may design a beautiful, color blind-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\u2019ve made your point.<\/p>\n

Case in point: Excel. Excel offers icons in traffic light colors to help tell your data story. Make sure you use differently shaped icons as well as different colors! Here\u2019s why:<\/p>\n

\"Normal
\nDesktop Excel, Office 2013. Pay attention to the red and green circles\u200a\u2014\u200acould you tell them apart easily? Microsoft resolved this issue in later versions.<\/p>\n

Deuteranopia and protanopia are two common types of red-green color blindness. Testing your colors against them will optimize for most of your users, but icons help seal the deal.<\/p>\n

Don\u2019t trust preset color palettes<\/h2>\n

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 color blindness.<\/p>\n

\"Popular
\nExamples of popular preset color themes that didn\u2019t check for accessibility in color usage. (Or, \u201cWhy not to use orange.\u201d)<\/p>\n

The most important question when looking at your reds, greens, oranges, and yellows is, \u201cWill my users recognize this color when they see it by itself?<\/strong>\u201d Don\u2019t trust the people who created your framework to have thought of this. Check it out for yourself.<\/p>\n

Common colorblindness checking with Adobe<\/h3>\n

How do you do that, you ask? For many years the only solution I found for testing was Adobe\u2019s PhotoShop, which offered protanopia and deuteranopia views of whatever I was creating. The options are under View \u2192 Proof Setup (see image below).<\/p>\n

\"Path
\nScreenshot: finding the colorblindness previews in Adobe Photoshop.<\/p>\n

Recommended online colorblindness checker<\/h3>\n

The Corblindor Coblis (Co<\/strong>lor Bli<\/strong>nd S<\/strong>imulator)<\/a> is now my go-to tool. Just do a quick screen shot of your work, and see how it looks for many different types of colorblindness.<\/p>\n

Plan ahead with a color template<\/h2>\n

I\u2019ve done a lot of data visualization color work over the years, and a pattern has emerged that I find helpful. I\u2019m offering it here, in the interests of making data more usable. I strongly recommend considering this approach when you\u2019re developing a brand color palette.<\/p>\n

\"Example
\nNotice how light vs. dark and warm vs. cool differentiate the red and green. Your yellow should be significantly lighter than either your red or green!<\/p>\n

Here are the key guidelines:<\/p>\n