WCAG Contrast Checker
Pick a text color and a background color to see the WCAG contrast ratio and whether it passes AA and AAA for normal and large text, with a live preview.
Colors
LocalResult
| AA — normal text | |
|---|---|
| AA — large text | |
| AAA — normal text | |
| AAA — large text |
About Contrast Checker
The Contrast Checker measures the WCAG contrast ratio between a text color and a background, and reports whether it passes AA and AAA for normal and large text. It is essential for designers and developers building accessible interfaces.
Readable color combinations are a legal and usability requirement. Checking the ratio locally gives an instant pass or fail against the official thresholds while you design.
Step by step
- Choose a text color and a background color.
- The contrast ratio is calculated and shown with a live preview.
- Read the AA and AAA results for both normal and large text.
- Adjust either color until the combination passes the level you need.
What it offers
- WCAG contrast ratio
- AA and AAA pass indicators
- Foreground and background pickers
- Checked on your device
Tips for best results
- Aim for at least AA (4.5:1 for normal text); treat AAA as a stronger target.
- Large or bold text has a lower threshold, but do not rely on that for body copy.
- Check both light and dark themes if your interface supports them.
Why people use it
WCAG thresholds
Reports AA and AAA results for normal and large text.
Live preview
See the actual text-on-background pairing as you tune it.
Accessibility-focused
Helps meet real readability requirements.
Local
Color values stay in your browser.
Common questions
This runs entirely in your browser
No file or text you enter here is uploaded. Encoding and decoding happen on your device using native browser APIs — close the tab and nothing remains on a server.