Select Colors
Contrast Ratio
Large Heading Text
This is normal body text. Good contrast is essential for readability and accessibility for all users.
Normal Text (AA)
Requires 4.5:1
Large Text (AA)
Requires 3:1
Web Accessibility & Color Contrast
Color contrast refers to the difference in light between the font (foreground) and its background. High contrast ensures that people with visual impairments, color blindness, or simply those using screens in bright sunlight can read your content.
WCAG 2.1 Guidelines Explained
The Web Content Accessibility Guidelines (WCAG) are the global standard. They define three levels of conformance:
- Level A: Minimal compliance. Not recommended for modern web design.
- Level AA: The target for most websites. Requires 4.5:1 for normal text and 3:1 for large text.
- Level AAA: The gold standard. Requires 7:1 for normal text. Mandatory for some government and medical sites.
Frequently Asked Questions
What counts as "Large Text"?
According to WCAG, large text is defined as 18pt (approx 24px) or 14pt (approx 18.66px) if bold.
Does low contrast affect SEO?
Indirectly, yes. If users bounce from your site because they can't read it, your engagement metrics drop, which can signal to Google that your page provides a poor user experience.
How do I fix low contrast?
Usually, simply darkening your text color (e.g., from light gray #999 to dark gray #555) or lightening the background is enough to pass AA standards.