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

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.