This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Web Publishing

Web Publishing and Color Vision

One advantage of publishing on the Web is the availability of many colors and backgrounds. Research suggests, however, that about 8% of men and about 1% of women have a deficiency of color vision which affects their ability to discern certain colors. Page designers must, therefore, be aware of color combinations which would make their information inaccessible to a portion of users.

return to topColor Vision Basics

In order to avoid troublesome color combinations, page designers should be aware of how color is perceived by the human eye. Three factors affect how color is perceived:

Users with color deficiency are often unable to differentiate between colors of similar hue when those colors are of the same lightness and saturation. For example, someone with the most common color deficiency has trouble separating red from green when the red and green are close in saturation and lightness. For example, those with red-green deficiency have difficulty distinguishing between the red and green lights on a traffic signal.

return to topTips for Web Page Designers

Web page designers can avoid problems for their users if they follow a few simple color rules.

HINTS:
Avoid using text, graphics, and backgrounds of similar hue, similar saturation, or similar lightness.
Avoid using link colors of similar hue, similar saturation, or similar lightness to the background or to one another.

Do Not Do
Example of blue on blue
Example of blue on yellow
Avoid using text, graphics, and backgrounds of similar hue (e.g., instead of using blue on blue, use blue on yellow).
Example of greyish blue on rose
Example of white on rose
Avoid using text, graphics, and backgrounds of similar saturation (e.g., instead of using a greyish blue on rose, both close to achromatic grey, use white on rose).
Example of pale green on pale yellow
Example of dark green on pale yellow
Avoid using text, graphics, and backgrounds of similar lightness (e.g., instead of using pale green on pale yellow, both light colors, use dark green on pale yellow).
Example of red to pink
Example of dark blue to pink
Avoid using link colors of similar hue, similar saturation, or similar lightness to the background or to one another (e.g., instead of using links which change from red to pink, use links which change from dark blue to pink). Always be aware that background color may interfere with the readability of colored links.

In order to help users with color deficiency, the best practice for Web designers is to make sure colors which are meant to distinguish items are significantly different in two areas (e.g., hue and lightness). That way, if the user is color deficient in one area (e.g., red-green hue), he or she can still distinguish the item by another attribute (e.g., its lightness or saturation).

Excellence. Our Measure. Our Motto. Our Goal.