Effective Color Contrast

Designing for People with Partial Sight and Color Deficiencies

by Aries Arditi, PhD

This Web page contains three basic guidelines for making effective color choices that work for nearly everyone. Following the guidelines are explanations of the three perceptual attributes of color -- hue, lightness and saturation -- as they are used by vision scientists.

How does impaired vision affect color perception?

Partial sight, aging and congenital color deficits all produce changes in perception that reduce the visual effectiveness of certain color combinations. Two colors that contrast sharply to someone with normal vision may be far less distinguishable to someone with a visual disorder. It is important to appreciate that it is the contrast of colors one against another that makes them more or less discernible rather than the individual colors themselves. Here are three simple rules for making effective color choices:

color contrast picture 1

1. Exaggerate lightness differences between foreground and background colors, and avoid using colors of similar lightness adjacent to one another, even if they differ in saturation or hue.

color contrast picture 2

Dont assume that the lightness you perceive will be the same as the lightness perceived by people with color deficits. You can generally assume that they will see less contrast between colors than you will. If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.

color wheel

2. Choose dark colors with hues from the bottom half of this hue circle against light colors from the top half of the circle. Avoid contrasting light colors from the bottom half against dark colors from the top half. The orientation of this hue circle was chosen to illustrate this point.

color contrast 3

For most people with partial sight and/or congenital color deficiencies, the lightness values of colors in the bottom half of the hue circle tend to be reduced.

color wheel contrast

3. Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.

color contrast 4

Color deficiencies associated with partial sight and congenital deficiencies make it difficult to discriminate between colors of similar hue.

Hue, lightness and saturation -- the three perceptual attributes of color -- can be envisioned as a solid.

color contrast 5

Hue varies around the solid; lightness varies from top to bottom and saturation is the distance from the center.

color wheel

Hue is the perceptual attribute associated with elementary color names.
Hue enables us to identify basic color catagories such as blue, green, yellow, red and purple. People with normal color vision report that hues follow a natural sequence based on their similarity to one another. With most color deficits, the ability to discriminate between colors on the basis of hue is diminished.

color contrast 6

Lightness corresponds to how much light appears to be reflected from a colored surface in relation to nearby surfaces.

Lightness, like hue, is a perceptual attribute that cannot be computed from physical measurements alone. It is the most important attribute in making contrast more effective.

With color deficits, the ability to discriminate colors on the basis of lightness is reduced.

color contrast 7

To a person with color-deficient partial sight, the left-hand panel might appear like the right-hand panel appears to a person with normal color vision.

With color deficits, the ability to discriminate colors on the basis of all three attributes -- hue, lightness and saturation -- is reduced. Designers can help to compensate for these deficits by making colors differ more dramatically in all three attributes.

Aries Arditi, PhD, is Senior Fellow in Vision Science, Lighthouse International; this brochure is based on his earlier work with Kenneth Knoblauch.


© Lighthouse International (www.lighthouse.org). Used with permission from the author & organization.