Color Contrast: The Basics

Color contrast ratio measures the contrast between a text color and the background color behind it.

Proper color contrast makes the website accessible not only for users with low vision and color impairments, but also for users in bright conditions like mobile users outdoors.

For AA compliance of unlinked text, WCAG requires a minimum of 4.5:1 color contrast ratio for normal-sized text and a 3:1 color contrast ratio for larger text.
​

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

Many organizations use color to distinguish links from the surrounding text. The color contrast between links and surrounding text is not as critical if you distinguish your links from the surrounding text by formatting, such as making links bold or underlined. At a minimum, it's recommended to add underlining to the link on hover and focus.

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

For AAA compliance of unlinked text, WCAG requires at least a 7:1 color contrast ratio for normal-sized text or a 4.5:1 color contrast ratio for larger text.

Many website owners find the AAA color contrast requirement too difficult to achieve. If you ignore this AAA-check in DubBot, the AA-level text contrast check will still run.