Even better, they tweeted it!
Cross-posted from my Medium blog.
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’t relevant. What we don’t do, far too often, is make them accessible.
A significant minority of people are color blind, and most of those have red-green color blindness. Since 2011 I’ve 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’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, 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’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 differently shaped icons as well as different colors! Here’s why:
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.
Don’t trust preset color palettes
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.
The most important question when looking at your reds, greens, oranges, and yellows is, “Will my 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.
Common colorblindness checking with Adobe
How do you do that, you ask? For many years the only solution I found for testing was Adobe’s PhotoShop, which offered protanopia and deuteranopia views of whatever I was creating. The options are under View → Proof Setup (see image below).
Recommended online colorblindness checker
The Corblindor Coblis (Color Blind Simulator) 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.
Plan ahead with a 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 data more usable. I strongly recommend considering this approach when you’re developing a brand color palette.
Here are the key guidelines:
- Use a light, medium, and dark shade. Your yellow should be your light shade.
- Use a warm green and a cool red, or a cool green and a warm red. Just don’t have both cool or both warm.
- No orange. Because it’s so much lighter, using yellow instead of orange makes it much less likely your “warning” color will conflict with your “success” green to color blind users, or look too much like your “serious problem” (errors, e.g.) red.
That’s it! Thanks for reading. Go forth and have fun telling good stories with your data.
One of the first things I did for Kinnser Software was begin to establish content strategy guidelines, and this was the first one. It was published in the Kinnser UX blog I started and maintained, as well as the living (coded) style guide I created.
When writing for headers, buttons, navigation links, and similar items, the guidelines are simple:
- Use nouns for things.
- Use verbs for actions.
- Avoid generic terms like “Submit,” as the action may not be interpreted correctly. Instead, describe exactly what the action will do. This is particularly important for our users, since the term “submit” can have multiple meanings. For example, Medicare claims are submitted. An example of good button text can now be seen in the Approve Claims area of Billing Manager [a key Kinnser feature]. Instead of “Submit,” the button helpfully says “Approve Claims for Submission.”
- Avoid gerunds: verbs functioning as nouns by adding “-ing” to the end of the word. For people for whom English is a second language, this form can be confusing.
Simplicity in design is not a goal by itself, but a tool for better experience. The goal is the need of the moment: to sell a product, to express an opinion, to teach a concept, to entertain. While elegance and optimal function in design frequently overlaps with simplicity, there are times that simplicity is not only not possible but hurts usability. Yet many designers do not understand this, and over the years, I’ve seen the desire to “keep it simple, stupid,” lead to poor UX.
I was therefore glad to see Francisco Inchauste’s well-thought, longer version of Einstein’s “as simple as possible, but no simpler” remark.
From the column:
As an interactive designer, my first instinct is to simplify things. There is beauty in a clean and functional interface. But through experience I’ve found that sometimes I can’t remove every piece of complexity in an application. The complexity may be unavoidably inherent to the workflow and tasks that need to be performed, or in the density of the information that needs to present. By balancing complexity and what the user needs, I have been able to continue to create successful user experiences.
Plus, as I’ve commented before, messy is fun!
- Inchauste, F. The dirtiest word in UX: complexity. UX Magazine, 6 July 2008.
Originally posted on former personal blog UXtraordinary.com.
Context is a sci fi/fantasy conference in Columbus, Ohio. I had the pleasure of doing a couple of program covers. This is one I most enjoyed: a dragon, captivated by a book to the exclusion of the alien invasion and vampire drama raging around her.
The actual program printed in black and white, but I typically enhance my stippling with watercolor or digital color.