Color Contrast Checker
Pick a text color and a background color to see their exact contrast ratio and whether it passes WCAG AA and AAA thresholds for normal and large text — essential for making sure your design is readable and accessible.
All calculations happen on your device — colors are never sent to a server.
Regular 16px text Aa 123
Contrast ratio: 18.88:1
What this tool does
Calculates the contrast ratio between a text colour and a background colour and shows whether it passes the accessibility thresholds at AA and AAA for normal and large text, with a live preview.
When to use it
- Choosing interface colours and wanting to confirm the text is legible.
- Auditing an existing design against accessibility standards.
- Comparing two shades to see which reads better on your background.
- Meeting an accessibility requirement on a project.
How to use it
- Enter the "Text color" and "Background color".
- Read the "Contrast ratio" and the preview.
- Check the four results: AA and AAA for normal and large text.
A practical example
Input
Light grey text on a white background.
Output
A low ratio that fails AA for normal text while possibly passing for large — which explains why small text looks washed out while the headings seem acceptable.
Limitations
- Passing the ratio is necessary for accessibility but not sufficient: text that passes mathematically can still be hard work because of its typeface, size or spacing.
- The standards distinguish normal from large text, and large text has a lower threshold — so check which category yours falls into.
- The calculation is for two solid colours; text over an image or a gradient sits on a changing colour, so one sample is not enough to judge it.
Privacy and processing
All calculations happen on your device and colours are never sent to a server.
Technical notes
- The ratio uses the relative-luminance formula from the web accessibility standards, so the result matches what official checkers report.