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.
Color 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:
- Hue, the degree to which a color is similar to the basic colors (red, yellow, green, and blue) or a combination thereof
- Saturation, the degree to which a color differs from achromatic (white, gray, or black)
- Lightness, the degree to which a color appears lighter or darker than another under the same viewing conditions (determined by how much light a color reflects)
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.
Tips 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 |
|---|---|
 |
 |
| Avoid using text, graphics, and backgrounds of similar hue (e.g., instead of using blue on blue, use blue on yellow). | |
 |
 |
| 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). | |
 |
 |
| 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). | |
 |
 |
| 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).
