Contrast Checker
Check whether text stays readable over a photo or a gradient, not just flat colours — sampling the hardest points and reporting WCAG contrast.
Drag the text to where it will sit in your design — the check samples the pixels directly beneath it.
What this does
Solid-colour contrast checkers cannot tell you whether text stays readable over a photo or a gradient, where the background brightness changes across the text. This tool lets you drag the text to where it will actually sit, then samples the hardest points directly beneath it and reports the WCAG contrast ratio there — so you know the worst case in the spot that matters.
Everything happens in your browser — any image you load is never uploaded.
Common questions
What is a passing score?
WCAG AA wants a ratio of at least 4.5:1 for normal text and 3:1 for large text; AAA is stricter at 7:1 and 4.5:1. The tool flags which level you meet.
Can I test against a background image?
Yes — that is the point. Choose the image mode and load a photo; the preview takes the image’s own shape so nothing is cropped, and you can drag the text over any part of it.
Why does it sample beneath the text?
Over a varied background, text is only as readable as its least-legible spot. Sampling the exact area behind the text — and reporting the worst point within it — tells you whether it holds up where you have actually placed it.