Who it helps
It helps designers choosing palette combinations, developers reviewing CSS tokens, and content teams checking whether text remains readable before a design ships.
Contrast checker
Test a colour pair against WCAG contrast thresholds in real time.
Readable by design.Small text should remain clear in every context.
4.92:1AA normal PassAA large PassAAA normal Fail
ABOUT THIS TOOL
Use it with context.
The Colour Contrast Checker compares a foreground and background colour and reports the mathematical contrast ratio used by WCAG text criteria.
How it works
Each colour is converted to relative luminance, then the lighter and darker values are compared using the WCAG contrast formula. Results are shown separately for normal text, large text, and enhanced AAA thresholds because one pass label does not cover every use.
Privacy
Colour values are calculated locally in your browser. No palette, project name, screenshot, or design file is uploaded or retained.
HOW TO USE IT
A practical workflow.
- 01
Enter or choose the foreground colour used by the text.
- 02
Enter the exact background beneath it, including the resolved result of any design token.
- 03
Check the result that matches the intended text size and weight.
- 04
Test focus, hover, disabled, error, and visited states separately when their colours differ.
COMMON PROBLEMS
What the output cannot decide for you.
Testing the wrong background
Transparent layers and gradients can change the final colour. Test the actual composited pair, especially over imagery.
Treating large-text AA as a universal pass
The relaxed threshold applies only when the rendered text meets the relevant size and weight definition.
Using colour as the only signal
A strong ratio does not replace labels, icons, patterns, or text that communicate status without relying on colour perception.