Web Tools
Color Contrast Checker - WCAG Ratio Calculator
Compute the contrast ratio between background and foreground colors against WCAG 2.1 and see AA and AAA pass status.
Contrast Ratio
0.00
Normal Text
AA: -
AAA: -
Large Text
AA: -
AAA: -
The quick brown fox
Aa
Accessibility is no longer optional
Web accessibility is no longer optional, with more countries making it a legal requirement, and low contrast locks out users with low vision. WCAG 2.1 requires a ratio of at least 4.5:1 for AA and 7:1 for AAA on normal text, and 3:1 for AA and 4.5:1 for AAA on large text.
This tool computes the contrast ratio and shows the pass status for each level. Results update as you change colors.
Who gets the most out of it
- Web designers and publishers — checking contrast in a mockup
- Accessibility leads — verifying WCAG compliance
- Frontend developers — improving text readability
Frequently asked questions
AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. AA is the baseline in most regulations.
Under WCAG 2.1, large text means at least 18pt (24px) for regular fonts, or at least 14pt (18.5px) for bold fonts. Large text is more legible, so a lower ratio is allowed.
Currently HEX input is supported. A color picker is provided alongside so you can also choose colors visually.
Share this page