Using Color on the Web

The following are baseline requirements for using color on the web that complies with Section 508 standards for web-based intranet and internet information and applications.

Contrast

Make it easier for users to see and hear content by separating foreground from background and using colors that contrast well against each other. Due to the variety of color deficiencies, it is recommended you test your colors and images with the color blind simulator. You also may test color combinations to ensure good contrast.

DO:

Do use colors that contrast well against each other.

Example:

Example of white text on maroon background

DON'T:

Don't use complementary colors, bright colors, or low contrasting colors against each other.

Example:

Crossed out example of white text on yellow background

Using Color to Convey Meaning

DO:

Do use color with another differentiation to distinguish visual elements.

Example:

Example of a form using color and text to denote required fields

DON'T:

Don't use color as the sole method of distinguishing visual elements.

Example:

Crossed out example of a form using only color to denote required fields

Color in Links

Color alone is not to be used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.

DO:

Do use a high contrast color and underline to distinguish links in text.

Example:

Example of black text with a blue, underlined link

DON'T:

Don't use maroon alone to determine a link (not sufficient contrast between black and maroon text).

Example:

Crossed out example of black text with a maroon link