Using color

Using color to differentiate between elements on a page is fine. However, you should avoid using color as the only visual means to differentiate parts of a page.

For example,

• Error, success, or notification messages, more info in Write out an error message in text.
• Links in the content, more info in Styling links.
• Active, hover or focus states, more info in Styling focus and hover states of interactive HTML elements.
• Display information updates.

Use additional styling to indicate types of information including a change of shape or decoration.

Examples

Correct

Use symbols and colors in graphics.

Graphic with differently shaped symbols in black in white:

Incorrect

Color used as the only indicator for information or functionality:

The easiest way to check whether your website may be usable by color-blind people is to test it in grayscale. When the color information is extracted, you can more easily see whether your website is still understandable.

Resources

WCAG Success Criteria for the use of color

• 1.4.1 Use of Color (level A).
• 1.4.11 Non-text Contrast (level AA).