Light grey text on white looks stylish but is hard to read, especially for people with weak eyesight or on a phone in sunlight. WCAG sets a minimum contrast to avoid this.
Try it now: Color Contrast Checker
Free, no sign up, and the file stays on your device.
Open Color Contrast CheckerHow to check
- Open Color Contrast Checker.
- Choose the text colour and the background colour.
- Read the ratio and the pass or fail table.
- Change the colours until the checks you need pass.
What the levels mean
- AA normal text needs 4.5 to 1.
- AA large text needs 3 to 1.
- AAA normal text needs 7 to 1.
- Buttons and icons need 3 to 1.
Large text
Large means 18 point or bigger, or 14 point bold. That is roughly 24 pixels, or 19 pixels bold.
Frequently asked questions
Is anything uploaded?
No. Everything is calculated in your browser, so what you type stays on your device.
Ready to start?
Open Color Contrast Checker