Ensure the Contrast Between Foreground and Background Colors Meets WCAG 2 AA Minimum Contrast Ratio Thresholds

WCAG requires all text elements on a website to have sufficient contrast between the text in the foreground and the background colors behind it.

Why It Matters

People with low vision don’t see color in the same way as other people. Very often, objects tend to appear at the same brightness, making it difficult to distinguish specific details. This is why using the correct color contrast is important.

Fixing the Issue

Make sure that the contrast between the foreground text and the background colors on any given page meets the WCAG 2 AA contrast ratio thresholds.

Color contrast should be at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image. Large text has been defined in the requirements as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels). Note: Elements found to have a 1:1 ratio are considered “incomplete” and require a manual review.

This free Color Contrast tool can be used for testing.

Test Cases

For more examples, visit the following pages in the W3C’s GitHub’s ATC Rules library:

• Text has minimum contrast
• Text has enhanced contrast