You are in: homeblog > blog post

Color-Blind Users

Do you have information on your website or web application that relies on color to indicate its importance? Do you know how many of your users can see it?

Approximately 1 in 76 (1.30%) or just over 4 million people in USA (total US population 312.8 million in 2012) are color-blind. While working on the Paycor application, I saw firsthand how many of the usability test participants failed test questions when color was used to indicate that a field was in error.

Error example

From March 2012 usability test findings:

  • Some users could not tell which field was in error due to similar colors of field outlines. To most users, the red outline of the missing information was not obvious. Two users tried to “correct” the field outlined in orange and not in red. This could have been because they were color-blind and these colors looked very similar.
  • Although the error description at top of screen did display, the error message beside the field did not display until user clicked into field. User 4 did not seem to see field outlined in red and tried to correct the wrong field. If the error message beside the field had displayed, this, and all other errors, would have been corrected much faster.

Article Name Site Research
Research-Based Guidelines 1) Avoid the situation where important information is conveyed only in the form of color.
2) Caution when using red. For non color-blind people, red is the bright and vivid color. But for color-blinds, it is as dull as blue or dark green. Especially for protanopes, who cannot detect long wavelength of red light, dark red appears almost as black. Color-blind people, however, still feel certain ranges of reds as bright and vivid colors. Instead of pure dark red (RGB=100%, 0%, 0% or #FF.), please use vermilion (yellowish red with shorted wavelength: RGB=100%, 32%, 0% or #FF2000), or light red (mixed with white: RGB=100%, 8%, 8% or #FF1414).
First Principles of Interaction Design by Bruce Tognazzini /firstPrinciples.html Color Blindness
Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who won't be experiencing any color coding today.

Most people have color displays nowadays, but they are not universal. In addition, approximately 10% of human males, along with a rare sprinkling of females, have some form of color-blindness.

The cones in the eye are the source of color vision. We have cones separately sensitive to red, green, and blue. If the red ones are not functioning that is called protanopia. If the green are not functioning, that is called deuteranopia. Absence of blue, extremely rare, is called tritanopia.

Protanopia and deuteranopia are the most popular forms of color-blindness, collectively called red/green blindness. (There are, in fact, significant differences in their effects, but those differences have no real effect on interaction design.) While tritanopia is far more rare, it nonetheless rules out dependence on yellow-blue differentiation without secondary cues.

Secondary cues can consist of anything from the subtlety of gray scale differentiation to having a different graphic or different text label associated with each color presented.

I will offer solutions in my next post. (Error Messages Users Can See)