Usability Interface
Accommodating Color Blindness

by Paul Hoffman, Cognetics Corporation
Reprinted from Usability Interface, Vol 6, No. 2, October 1999

An estimated nine to twelve percent of the male population suffers from some form of color vision deficiency, commonly called "color blindness." It is important for computer interface designers to take into account and eliminate, if possible, any potential confusions that can arise because of color vision deficiencies.

Types

There are two major types of color blindness. The most prevalent causes are confusion between red and green. This type affects approximately eight to ten percent of the male population. In another type, an additional one to two Percent of men suffer from a deficiency in perceiving blue/yellow differences. Less than one percent of women suffer from any form of color blindness. To understand color blindness better, it is helpful to be familiar with the ways in which colors differ from each other. One standard way to discuss color is to divide it into hue, saturation and brightness (HSB).

Hue

Hue is the element that distinguishes one color of the rainbow from another. It is the quality that infuses an object with "orangeness" or "redness" or "blueness". In terms of people with color blindness, red and green hues are not differentiated as well as they should be.

Saturation

Saturation, the second element of the HSB color model, is the "pureness" of the color. High saturation equates to intense, "colorful" color. A color is desaturated by adding varying amounts of the its opposite or complementary color. Adding some blue-green desaturates Red. As colors become more desaturated, they tend toward a neutral grey. Less saturated colors are harder for the colorblind to distinguish.

Brightness

The third element, brightness, is sometimes called "lightness" or "value." (The highest value equals white; the lowest value equals black.) Changing the brightness or value of a color is accomplished by diluting it with white, which makes the color become lighter or pastel, or with black, which makes the color become darker or more subdued. Colors with similar brightness are harder for the color-blind to distinguish.

Color Blindness and the Software UI

Color blindness can cause confusion in a computer interface. The main area to be concerned with is the use of "color-coding" or "color-cueing." Designers frequently color-code individual words, buttons, or areas of the screen to differentiate functions or to group similar items. If the designer wishes the interface to be equally effective to individuals both with and without color blindness, color-cueing should take into account potential red/green and blue/yellow confusion.

What can be done to avoid confusion? Most sources on usability and interface design suggest avoid relying on color coding exclusively. Always provide an additional cue; don’t rely on color alone. For example, the standard default web browser of a link is underlined blue lettering. Interestingly, this particular color coding would stand up quite well, even without the additional cue of the underline, since blue is the universally recognizable color.

A second way to counteract color deficiency confusions is to make sure that colors have a high degree of contrast with each other. (Referring here to colors that signal differences – usually functional – in the interface.) Color should differ strongly in brightness. A very light green and a very dark red will be easier to distinguish than a red and green that are similar in brightness. Remember that the more similar two colors are in brightness or in saturation, the harder they will be to distinguish.

It is not easy to accurately test an interface for problems related to color-blind users, without actually running usability tests with real subjects. The "quick and dirty" approach is to take a snapshot of the environment (a "screen grab") and remove the color so you are looking at it in grayscale. In Photoshop, select the Adjust menu and then Desaturate. In PaintShop Pro, select Colors and then Grey Scale. The result does not represent what a color-blind person sees, but does give you a chance to see how much brightness contrast there is in the screen shot. Keep in mind that a color-blind user’s eyes will not respond in exactly this way to brightness differences -- this is just an approximation.

In general, when colors need to be distinct and recognizably different, select the light colors from orange, yellow, green or blue-green; select the darker colors from blue, violet, purple or red. (The colorblind already see blue, violet, purple and red as darker than normal.) Also, don’t pair colors similar in hue, in saturation, or in brightness. The great challenge here is to maintain pleasing palettes while increasing color contrast. I have found in the past that similarities in saturation and brightness make colors harmonize quite well, and therefore lead to attractive color schemes. But they don’t lead to ease of use for the individual with a color deficiency.

References

Jackson, Richard, MacDonald, Lindsay & Freeman, Ken. Computer Generated Color. John Wiley & Sons, 1994.

Color Contrast and Partial Sight: http://www.lighthouse.org/color_contrast.htm

Color Blindness and Link Colors: http://weber.u.washington.edu/d27/doit/Resources/color.blind.html

Color Blind Design Hints and Tips: http://www.cimmerii.demon.co.uk/colourblind/design.html

ChromaGen Lenses: http://www.ultralase.co.uk/chromg.htm

 

Go to STC Society Web Site