About this tool
WCAG AA/AAA colour contrast ratio checker.
Web Content Accessibility Guidelines (WCAG) require minimum contrast ratios between text and background colours to ensure readability for people with low vision. The Contrast Checker calculates the contrast ratio between a foreground and background colour and shows whether it passes WCAG 2.1 Level AA (4.5:1 for normal text, 3:1 for large text) and Level AAA (7:1).
Example
Text #333333 on background #ffffff → Ratio: 12.63:1 · WCAG AA: ✓ Pass · WCAG AAA: ✓ Pass
How to use
- Enter the text (foreground) colour in HEX or use the colour picker.
- Enter the background colour.
- Contrast ratio appears instantly.
- Tick marks show AA/AAA pass or fail.
Features
- Contrast ratio (WCAG 2.1 formula)
- AA and AAA pass/fail indicators
- Normal and large text thresholds
- HEX and RGB colour input
- Live colour preview swatch
Frequently Asked Questions
What contrast ratio does WCAG require?+
WCAG 2.1 Level AA: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). Level AAA: 7:1 for normal text, 4.5:1 for large text.
What counts as large text?+
Large text is 18pt (24px) or larger, or 14pt (approximately 18.67px) in bold weight.
How is contrast ratio calculated?+
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker. Luminance is computed from linearised sRGB channel values.
My ratio is 3.2:1 — is that good enough?+
For normal body text, no (AA requires 4.5:1). For large text (18px+) it passes AA (which requires 3:1). Aim for 4.5:1 or higher for all text.
What is WCAG AA compliance?+
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+). AA is the legal standard in many countries.
What is WCAG AAA?+
WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. The highest accessibility standard — recommended for medical, legal, or government content.