All Collections
Accessibility Help
Ensure proper Color contrast
Ensure proper Color contrast

Maintaining a high color contrast ratio is an important step to making a website accessible

Updated over a week ago

WCAG 2.0 requires at least a 4:5:1 color contrast ratio for normal size text and a 3:1 color contrast ratio for larger text.

Tools for measuring contrast

How Large is "larger text"?

24px or larger. If the text is bold, then 18.66px or larger. Beyond that, look at your text, and make sure it is easy to read, not simply "able to be read". Have a person with low vision test your site and get feedback.

What about Links?

Many organizations use color to distinguish their links from the surrounding text. If you use other ways to distinguish your links from the text (bold, underline, etc. - which is recommended), the color ratio doesn't matter.

However, color alone is NOT an accurate way to distinguish a link from the text around it. However, contrast alone, can be used. Your links must maintain a 3:1 contrast from the surrounding text, while still meeting the guidelines above for the ratio between the text and the background.

Other Considerations

When testing contrast, also be aware of the following:

  • If the text is on top of a graphic

  • Opacity being used on the background or on the text (RGBA)

Did this answer your question?