Colour contrast checker
Check colour contrast ratio against WCAG 2.1 accessibility standards. Shows AA and AAA compliance for normal and large text.
- Free, no sign-up
- No data stored
- Reviewed 2026-01-15
Your details
Results
- Aa normal
- ✓ Pass
- Aa large
- ✓ Pass
- Aaa normal
- ✓ Pass
- Aaa large
- ✓ Pass
- Ui components
- ✓ Pass
4.5:1
3:1
7:1
4.5:1
3:1
- Fails wcag
- AA Large text
- AA
- AAA
Preview
Preview text
Preview small
CSS
:root {
--text: #0D1420;
--background: #FFFFFF;
}Suggestions
| Option | Colour | Contrast ratio |
|---|---|---|
| #000000 On background | #FFFFFF | 21.00:1 |
| #FFFFFF On background | #FFFFFF | 1.00:1 |
Contrast note
About the Contrast Checker
Enter a foreground and background colour to calculate the contrast ratio and check WCAG 2.1 compliance levels. The tool shows pass/fail for AA and AAA standards at both normal and large text sizes. A live preview demonstrates readability.
How to use the Contrast Checker
- Enter the foreground (text) colour.
- Enter the background colour.
- Set font size and weight context.
- View the contrast ratio and WCAG results.
Frequently asked questions
What contrast ratio is needed for WCAG AA?
At least 4.5:1 for normal text (<18pt) and 3:1 for large text (≥18pt or bold ≥14pt). AAA requires 7:1 and 4.5:1 respectively.
What is considered large text?
18pt (24px) or larger normal weight, or 14pt (18.66px) or larger bold. Large text has lower contrast requirements.
Does this check colour blindness?
Not directly. Contrast ratio ensures sufficient luminance difference. For colour-blindness simulation, use a dedicated tool alongside this checker.
Sources
Figures are estimates for guidance only. Always confirm with the official source or a qualified professional before acting on them.