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.
What the contrast ratio means
Contrast ratio measures how different two colours are in brightness, on a scale from 1:1 (identical – invisible) to 21:1 (black on white). The higher the number, the easier text is to read. The Web Content Accessibility Guidelines (WCAG) set the ratios that text should meet so that people with low vision or colour-vision differences can read it comfortably, and those same thresholds are what accessibility audits, many design systems, and a growing number of legal requirements check against.
The tool works out the ratio the way WCAG defines it, from the relative luminance of the two colours, and tells you which levels you pass. When the background varies, it reports the worst ratio found beneath the text, because text is only as readable as its least-legible spot.
The WCAG levels
- AA, normal text – 4.5:1. The everyday standard for body text, and what most accessibility rules require as a minimum.
- AA, large text – 3:1. Large text (roughly 18px bold or 24px regular and up) is easier to read, so it’s held to a lower bar.
- AAA, normal text – 7:1. An enhanced level for when you want the most comfortable reading, or need to meet stricter requirements.
- AAA, large text – 4.5:1. The enhanced level for large text.
Why check over gradients and images
Text placed over a photo or a gradient is the case most likely to fail quietly. A caption might sit comfortably over the dark part of an image and become unreadable where the image brightens behind it. Because this tool lets you position the text exactly where it will appear and then measures the toughest point underneath, it catches those failures that a two-swatch checker simply can’t see.
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.
What’s the difference between AA and AAA?
AA is the standard most projects aim for and most accessibility rules require. AAA is an enhanced level with higher ratios, used when you want the most comfortable reading or need to meet stricter requirements. Meeting AA is a solid, widely-accepted target; AAA is a stretch goal.
What counts as “large” text?
WCAG treats text as large from about 18px bold, or 24px regular, upwards. Large text is easier to read, so it’s allowed a lower contrast ratio. Use the text-size control to check against the right threshold for your case.
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.
Is my image uploaded anywhere?
No. The image is read and measured entirely in your browser and never sent to a server. When you close the tab, nothing remains.