Color & Design · free
Contrast Checker
Check the contrast between two colors against WCAG AA and AAA for normal and large text so your design stays readable.
Aa
About the Contrast Checker
Check the contrast between two colors against WCAG AA and AAA for normal and large text so your design stays readable.
Everything runs in your browser — nothing is uploaded.
How to use the Contrast Checker
- Step 1Type or paste your input.
- Step 2The output updates live as you type.
- Step 3Copy or download the result when ready.
When people reach for this tool
Check text and background pairs against the guidelines
Failing a threshold is much cheaper to fix before the design is signed off.
Find out whether a real contrast problem exists
Subjective reports of hard-to-read text often turn out to be measurable.
Identify the specific pairs that need work
A short list of failing combinations is far more actionable than a general impression.
Practical tips
- Check the pair you actually shipped. A colour that passes against white can fail badly against a light grey.
- Large text has a lower threshold, so classify the text before deciding whether it passes.
What you get
- Live results while you type
- Runs entirely in your browser
- Copy and download with one click
Contrast Checker — FAQ
What is a passing ratio?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
What counts as accessible contrast?
A ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, which are the widely used thresholds.
Does a ratio guarantee readability?
No. It measures the difference in luminance, which is a strong indicator but not the whole story — font size, weight and spacing all affect how a text feels to read.
More color & design tools
All 6 other tools in this collection — free, no sign-up, nothing uploaded.