case study
Designing for color-impaired users
During some recent testing, we discovered that two of the most critical icons in our application failed for color-impaired users. My current project is an accounting application which contains many screens that utilize a common pattern for adding and removing. This pattern makes use of individual icons for each action. The icon for add is a plus symbol set within a green circle and the icon for remove is an “x” set within a red circle.
To the majority of users there is enough contrast between the symbols and the color for the user to distinguish between the two icons and to use them confidently and accurately. For a color-impaired user, however, this is a much more difficult task.
Color blindness is categorized into three main categories: deuteranopia, protanopia, and tritanopia. The first is common, affecting eight percent of males. The second is rare and the third is very rare. The first two are similar in that they drop out red leaving the user with a color spectrum that only includes yellows, browns, and blues. Bad news for our icons and quite unfortunate since red and green and internationally know for go/safe and stop/bad. In regards to our icons, color is out, leaving these users only the symbol to distinguish between the icons. And, with the same symbol used for both, only rotated forty-five degrees, they aren’t left with much.
Our solution was to change the shape of the “remove” icon to a box. With a third characteristic, the color-impaired users are now left with two characteristics instead of just one. The contrast between the square and the circle is also much more distinct than the plus sign within them as well. Here is how they turned out:
In hindsight, I’m not sure why we didn’t set the “remove” icon in a separate shape to begin with as it is such an usability improvement even for normal users.
While we did have a few color blind users to validate our designs, I’d like to mention an excellent free utility that we use to test our prototypes called Color Oracle. It is built by Bernhard Jenny at the Institute of Cartography in Zurich. It allows you to alter your computer’s color display for the entire system such that you see it in the way that a color bind user would. It has settings for each of the three main categories and allows you to toggle between them and back to normal by means of a single click in a menu added to the menu bar.
6 comments
Wade, you are doing amazing work at the Church. Keep it up. (And Clifton, thanks for supplying the quick fix icon).
comment by emsdot 2 hours later
These are much better. Now we “color-blindies” don’t have to work so hard to use these simple features. Great work!
comment by Rick 10 hours later
I’m going to look into Color Oracle just for the sake of my family seeing things the way I do. Being color blind usually isn’t so bad except when I’m approaching an intersection with blinking traffic lights at night—I have to ask my wife or kids “are those yellow or red blinking lights?”
comment by Matt Rasmussen about a day later
It makes me wonder how the size of the icons played into the problem. This is a great post and the fix was great. I’m now rethinking the shape of several buttons in an application I’m developing.
comment by Dalin about a day later
I actually always wondered what to do in this case of colorblind individuals. Most of my male in-laws suffer from deuteranopia, so this is helpful information. Maybe I’ll be a little more wary when using reds. The square icon is a good idea though, I’m surprised others don’t do that as much.
comment by Jeremy Lindblom 46 days later
Protans and deutans do not fail to see red; they merely confuse a range of colours, including red and green (assuming equivalent intensity).
comment by Joe Clark 47 days later
Comment preview
comment by you less than a minute ago