Ensure the Contrast Between Foreground and Background Colors Meets WCAG 2 AAA Enhanced Contrast Ratio Thresholds

Yotam Flohr
Researcher
Low vision
WCAG 2.1 Level AAA

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

Web accessibility guidelines state that all text elements must have sufficient contrast between text in the foreground and background colors behind it.

Why It Matters

Users with low vision experience low contrast, meaning that there aren’t very many bright or dark areas. When things appear about the same brightness, it can be difficult to distinguish outlines, borders, edges, and details. Text that is too similar in brightness to the background can also be hard to read.

Fixing the Issue

Developers should ensure that all text elements have sufficient color contrast between the text in the foreground and the background color behind it.

Color contrast should be at least 7:1 for small text or 4.5:1 for large text, even if text is part of an image. Large text is defined as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels). 

Test Cases

For more examples, visit W3C’s GitHub’s ATC Rules library