Color contrast checker
Check whether text is readable on its background under WCAG accessibility rules.
How it works
The ratio runs from 1:1 to 21:1. WCAG asks for at least 4.5:1 for normal text (AA) and 7:1 for AAA; 3:1 is enough for large headings.
Results are for guidance only and do not replace professional advice.
Worked example
With the default values:
- Text color#1a1f36
- Background color#f8faff
you get:
- Contrast ratio15.55 : 1
- AA normal text (4.5)✓ pass
- AA large text (3)✓ pass
- AAA normal text (7)✓ pass
Frequently asked questions
How does the “Color contrast checker” tool work?
The ratio runs from 1:1 to 21:1. WCAG asks for at least 4.5:1 for normal text (AA) and 7:1 for AAA; 3:1 is enough for large headings.
What do I need to enter?
Just fill in: text color, background color. The result updates as you type.
Can you give an example?
Text color: #1a1f36; Background color: #f8faff → Contrast ratio: 15.55 : 1; AA normal text (4.5): ✓ pass.
Is this calculator free, and is my data private?
Yes. HOD Calc is completely free with no sign-up. The calculation runs in your browser: nothing you type is sent or stored.