Free Accessibility Tool
Ensure your website is accessible by checking text and background color contrast ratios.
Color Pair
Large heading text — 24px bold
Normal body text at 16px. How readable is this colour combination when displayed on real content?
Small text — 12px caption or label
Quick Presets
WCAG Results
Contrast ratio
How It Works
Use the colour picker or enter a hex value
Or choose a quick preset combination
Displayed instantly with a rating
AA and AAA pass/fail for text and UI
FAQ
The WCAG contrast ratio measures the difference in perceived luminance between two colours on a scale from 1:1 (no contrast) to 21:1 (black on white). It is calculated using the relative luminance formula defined in the Web Content Accessibility Guidelines.
WCAG 2.1 Level AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum in most accessibility legislation.
WCAG defines large text as 18pt (24px) or larger in regular weight, or 14pt (approximately 18.67px) or larger in bold weight. Large text is easier to read at lower contrast ratios, which is why it has a lower minimum threshold.
Not directly. However, Google uses Core Web Vitals and page experience signals that reward accessible, user-friendly sites. Poor contrast leads to high bounce rates, which can indirectly harm rankings. Accessible design is also required to reach a wider audience.