gLog

One of my colleagues has a color vision deficiency (aka color blindness) . According to Prevent Blindness America, “It is estimated that 8% of males and less than 1% of females have color vision problems.” I occasionally use software to get a feel for how people with color vision deficiency see my designs. However, there is nothing better than having someone, who has a color vision deficiency, walk you through your designs and explain how they see things.

I’m working on a new user interface and, as is typical with this type of project, I’m designing how to highlight required form elements that haven’t been completed. It is fairly common to use a red color for this purpose:

While most people will be able to distinguish between these two fields, here is what this design choice looks like to my colleague who has a red/green color vision deficiency:

When he initially took a look at this, he indicated no difference between the fields. After further inspection he said, “the Email Address text is a little bit lighter than the other text.” So how do we resolve this? The quick solution was to change the highlight to a different color:

While this is effective, a better solution may be to include an additional visual device to highlight the field (which I plan to explore).

Below are links to a few software tools that simulate color deficiencies:

Vischeck - Upload an image or provide a URL for simulation. They also have a plugin for older versions of Photoshop (it doesn’t work with CS3).

Colorblind Web Page Filter - Provide a URL for simulation. This tool simulates more types of deficiencies than Vischeck.

Sim Daltonism - A really great OS X application (donate if you like it).

Posted in: Interaction Design