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.

posted by Wade Preston Shearer on Saturday, Feb 07, 2009
tagged with color blindness, accessibility