Using color


Web pages should be designed so that all information conveyed with color is also available without color, either from context or tags. Contrast between foreground and background should be distinct.

To make your sites accessible to the visually impaired, make sure that information is not conveyed through color alone. For example, do not ask users to "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g., a font effect), context (e.g., comprehensive text links), or an alternative indicator, such as an asterisk (*) or other symbol.

Color deficiencies associated with partial sight and congenital deficiencies make it difficult to discriminate between colors of similar hue. Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone with color deficits or when viewed on a black and white screen--will text and background still be distinguishable? Will your user still be able to navigate your links, images, etc.?

Don't 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 your light colors and darken your dark colors, you will increase the visual accessibility of your design.

To test whether your document still works without colors, examine it with a monochrome monitor or with browser colors turned off. Also, try setting up a color scheme in your browser that only uses black, white, and the four browser-safe shades of gray and see how your page holds up. You can also use WAVE to perform more sophisticated tests.

To test whether color contrast is sufficient to be read by people with color deficiencies or by those with low resolution monitors, print pages on a black and white printer (with backgrounds and colors appearing in grayscale). Also try taking the printout and copying it for two or three generations to see how it degrades. This will show you where you need to add redundant cues (example: hyperlinks are usually underlined on Web pages), or whether the cues are too small or indistinct to hold up well.

For more information you can go to Lighthouse International's tutorial for Effective Color Contrast.

Printer-friendly version