WCAG Contrast Checker
Check if your text/background colors meet accessibility standards.
About this calculator
Enter a text colour and a background colour and get the WCAG contrast ratio with pass or fail results for AA and AAA, for normal and large text.
Good contrast helps everyone read your page, and is a core accessibility requirement.
How to use it
- Pick the foreground and background colours.
- Read the ratio.
- Check the AA and AAA badges.
How contrast is calculated
WCAG contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L is the relative luminance of the lighter (L1) and darker (L2) colour. Luminance weights the linearised channels: 0.2126 R + 0.7152 G + 0.0722 B. Black on white gives 21:1, the maximum. AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) and UI components. AAA needs 7:1 and 4.5:1.
Worked example
Reference ratios
| Black on white | 21:1 (AAA) |
| #767676 on white | 4.54:1 (just passes AA) |
| #777777 on white | 4.48:1 (fails AA) |
| White on #0066cc | about 5.6:1 (AA) |
| Yellow on white | about 1.07:1 (fails) |
Everything runs in your browser. Nothing is uploaded.
Tips and common mistakes
- Aim for AAA body text where practical.
- Don't use colour alone to convey meaning.
- Check hover, focus and disabled states too.
- Light grey placeholder text is a frequent failure.
- Test over images with a solid overlay.
Frequently asked questions
What is a good contrast ratio?
At least 4.5:1 for body text and 3:1 for large text.
What is the maximum ratio?
21:1, black on white.
What is AA versus AAA?
Two WCAG levels; AAA is stricter (7:1).
What counts as large text?
18pt or larger, or 14pt bold.
Does contrast apply to buttons and icons?
UI components and graphics need 3:1.
Is this a legal requirement?
Many accessibility laws refer to WCAG AA.