I always wince when I hear people say things like “we’ll just make unfinished items yellow” or “we’ll make it red so everyone knows there’s an error”. Color can be a great way to convey information, but you cannot rely on color cues. Why? First, your users may be color blind. Second, it’s much easier to distinguish items based on shape and color (vs. color alone). Third, the meaning of color is cultural. Red is not recognized to mean “bad” in all of the world’s cultures. Today I’ll talk about the first two – the last one is for another post.

Let’s look at an example. The screen in this web application is showing a list of Triggers. Each trigger can be identified with an icon that is either red, yellow, or green. The different colors represent the severity of the problem. A green trigger is no big deal. Red triggers, on the other hand, may need immediate attention.

A web application that is relying on color to distinguish between low, medium, and high priority

A web application that is relying on color to distinguish between low, medium, and high priority

How would this screen look those who suffer from Deuteranopia?

On the left, normal vision. On the right, Deuteranopia

On the left, normal vision. On the right, Deuteranopia

Because color is the only cue, those users who are color blind cannot distinguish the different types of triggers. Nor is this information available anywhere else on the screen. There is no text corresponding with the icons, so for these users, those icons are effectively not there. Up to 8% of the white male population in the United States suffers from Deuteranopia (a form of color blindness).  So if you are building applications like this one for IT professionals (and your users are mostly white men) that means that up to 8% of your entire user base cannot tell the difference between a low priority and a high priority trigger on this screen. That’s bad.

Ok, let’s look at the second issue. These icons rely completely on color to differentiate themselves. Each icon has the same shape – just a different color. It’s much easier (and faster) for the eye to scan a list of items and look for different shapes (especially when those shapes are boosted with color information) than it is to look for just color variations. Take a look at this rework of the list.

On the left, normal vision. On the right, Deuteranopia.

On the left, normal vision. On the right, Deuteranopia.

This example uses both color and shape to distinguish between the different Triggers and the result is that the list is easier to scan for both the colorblind users and those with normal vision. There’s a lot more you could do here: for instance, rather than red/green/yellow, you could choose 3 colors that get progressively darker to indicate severity.  You could experiment with different shapes for the icons. You could use text in addition to the icons, to support their meaning.

I always tell clients that first we design without color – just shades of gray. If the interface can convey what it needs to in shades of gray, then the addition of color can enhance that information.

I’m curious: What would you do to solve this problem? Do you think about color blindness when working with color in your applications? Have you tried to see what your product looks to colorblind users? (You can by using the Color Oracle.) Are you color blind? Do you run into these sorts of problems a lot?