The use of color

Color is a powerful way to add meaning to elements on a page. However, you need to make sure color is not the only way users can get this additional information.

Users who are colorblind, are visually impaired, or who don’t understand the intention of the color you chose, will otherwise miss the information. A color may not have the same meaning in every culture. Always add additional information when you use color in a meaningful way.

Two forms, one with the error only indicated by a red border and one with additional text to explain the error

In addition to color, use another way to add information. For example:

Examples

Don’t: Use only color to distinguish the different items in a graph.

graph of CMS usage with colored lines to show the data.

Source data: Historical yearly trends in the usage statistics of content management systems by W3Techs.

Do: In addition to colors, use line shapes and/or symbols, so colorblind users can understand the data too.

graph of CMS usage with differently shaped symbols for the data.

Don’t: Use only color to indicate a link in a paragraph of text. Visitors may miss important links.

Forgotten vegetables are those once-common crops that have largely disappeared from modern diets. They were very common before, but now our food choices have changed.

Do: Underline the link a paragraph of text.

Forgotten vegetables are those once-common crops that have largely disappeared from modern diets. They were very common before, but now our food choices have changed.

Check your design in gray scale

To check if your website works for colorblind users, you can view it in grayscale. Without color information, you get a better sense for whether your site is easy to understand.

Some tools to emulate how colorblind visitors view your website:

Resources

WCAG Success Criteria for the use of color

  • First published: October 10, 2025
  • Last updated: September 30, 2026
  • Edit article: Improve it on GitHub
  • Contributors: Joe Dolson, Maja Benke, Rian Rietveld.