Worst case, not a sample
A reader cannot choose which part of the background a word lands on. The lowest-contrast spot behind the text is where it becomes hard to read, so that is the number this leads with.
Image contrast checker
Draw a box around text on a photo, screenshot or gradient. Get the contrast at its worst spot, not at one clicked pixel.
Your image never leaves your device. It is opened and measured inside this browser tab; nothing is uploaded, stored or sent. How to check that for yourself.
1. Load an image
Drop an image here
or press Enter to choose a file, or paste an image from your clipboard (Ctrl+V or ⌘V)
PNG, JPEG, WebP, GIF or AVIF, up to 25 megapixels
2. Select the text
Drag a box around the text on the image, or type the box in as numbers below. Include some of the background around the letters: that is what gets measured.
The box around the text, in pixels of the original image
Fill in all four and the measurement updates by itself. They follow the box you draw, and drawing follows them.
3. Text colour and size
Click the middle of a thick part of a letter on the image. Keyboard users can type the colour or use the eyedropper instead.
4. Result
The tool picked this colour itself. Compare it with the letters on the image: the result becomes a verdict only once the colour is yours.
Where it fails
| Part of the box | Left | Centre | Right |
|---|
What this tool can't do
- It measures the pixels of the image you give it. A screenshot or export can differ from the live page, because scaling, colour profiles and image compression all shift colours, so re-check anything borderline in the real thing. How WCAG applies to text over a varying background is a judgement call; this gives you the numbers across the whole box so you can make it.
- It assumes one text colour. Gradient text, outlined text and text with a shadow are not modelled: set the text colour yourself and treat the result as approximate.
- It cannot read. It does not know whether your box contains text, only which colours are in it.
- The colour it detects by itself is a guess about which colour is the lettering, and it can be wrong, so it is only a suggestion: until you confirm it or set the colour yourself, the result says "if the text is …" and is not a verdict. Check the suggestion against the letters before you confirm it. If it is even slightly off, type the exact colour instead: a pale patch behind some white words can be suggested in place of the white, and confirming it measures the patch.
- Anti-aliased letter edges are removed with a heuristic. Thin lines, grids, pinstripes and fine texture in a photo look like the soft edges of letters up close, so they can be set aside with them, and so can a thin ring of background hugging each letter. Failing detail that runs unbroken right across the box cannot be lettering, so when any of it was set aside away from the letters, the result is not a plain pass and gives both figures. That includes a rule or border drawn in the text colour: the tool cannot tell it from a bright line in a photo, so draw the box to leave it out. Other set-aside detail, such as specks, short marks or texture in one part of the box, changes the result only when counting it would add more than 5 percentage points to the failing share, because thin or light lettering looks the same. Below that it can still pass, and so can detail right beside a letter, which is set aside with the letter.
- If the text colour also appears in the background, such as white text over a white sky, those areas cannot be told from the letters and are not measured. An area of that colour too wide to be part of a letter is flagged in the result; a smaller one is not, and neither is one in a box that holds nothing else to compare it with. A solid shape in the text colour standing apart from the letters is flagged too, because it could be a patch hiding a word; the result says it may instead be an icon or a bullet.
- A box with more than 1,000,000 pixels is measured on a regular grid, not pixel by pixel, so a speck or a line thinner than the grid spacing can be missed.
- Images over 25 megapixels are refused, and a phone may run out of memory on smaller ones. Transparent pixels are measured as if they sat on white.
- It checks text contrast only (WCAG 1.4.3 and 1.4.6): not interface components, not hover or focus states, and not whether the text should be an image at all. A pass is a measurement of one image, not a statement that a page meets any standard or law, and it isn't legal advice.
How the worst case is measured
-
Pick the pixels
Your box is read from the image. If it holds more than 1,000,000 pixels, the tool measures a regular grid of them instead, so large images stay quick: every Nth pixel in each direction, using the smallest N that keeps the grid within 1,000,000 points. For a whole 12-megapixel phone photo (4032 × 3024) that is every 4th pixel, and the result says which spacing it used. Nothing outside your box is read.
-
Find the text colour
Unless you set it, the tool splits the box's pixels into the two colour groups that describe them best and takes the smaller group as the text, because letters usually cover less of a box than what is behind them. It also scores how clear that split is, and checks that neither group hides a third colour, such as a dark building beside a headline on a pale sky, which would make "the smaller group" meaningless. If it cannot tell the text from the background it says so and asks for the colour. When it can, the colour is still only a suggestion: the result is worded "if the text is …", with no pass or fail, until you confirm the colour with one button or set it yourself.
-
Set aside the letters and their soft edges
Pixels that match the text colour are the letters. The anti-aliased pixels along their edges are blends of text and background, so they are always lower in contrast than the background itself, and counting them would make every piece of text fail somewhere. They are set aside: pixels touching a letter, and blended pixels one step further out. A smooth stretch of background is never set aside just for looking like a blend, so the dark end of a gradient still counts. Thin lines, grids and fine texture are different: up close they look like the soft edge of a thin letter. The result says so and gives both figures instead of a plain pass when failing detail like that runs unbroken across the box and some of it has no letter near it, or when counting it as background would add more than 5 percentage points to the failing share. It does the same when an area of the text colour is too wide to be a letter.
-
Measure what is left
Every remaining background pixel gets a WCAG contrast ratio against the text colour. You see the worst ratio, the 5th percentile, the median and the share of the background below your threshold. The verdict only says "passes everywhere" if every measured pixel passes, nothing set aside would change that, and the text colour is one you set or confirmed: a median that passes while a third of the box fails is not a pass.
What the thresholds mean
| Text size | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
These come from WCAG success criteria 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced). Large text is at least 18 point (24px), or at least 14 point (about 18.7px) and bold.
Why a box and not a pixel
Where, not just whether
A heat map on the image and a plain-text table show which part of the box fails, so you know what to move or darken. Neither relies on colour alone.
Nothing leaves your device
There is no upload, no account and no server doing the maths, so a screenshot of an unreleased design never goes anywhere.
Questions
Does my image get uploaded?
No. The image is decoded and measured in this browser tab, and there is no server-side processing: the maths is in two script files you can read, image-contrast-ui.js and image-contrast.js. To check for yourself, open your browser's developer tools, switch to the Network tab and load an image. Apart from this page's own files and its web font when the page first opens, nothing is requested.
Why does it report the worst case instead of an average?
An average or a median can pass while a third of the box fails. The tool reports the worst ratio, the 5th percentile and the median, and the share of the background that fails your threshold, and it only says a box passes if every measured pixel does.
Why do I have to confirm the text colour?
Because the detected colour is the tool's guess at which colour is the lettering, and a wrong guess gives a wrong answer that looks just as sure as a right one. In our own testing, white text on a sky fading from blue to pale, beside a dark building, was taken to be the colour of the building, and measured with that colour the box passed, although most of the background behind the real text failed. So until you press "Yes, the text is …", type the colour, pick it from the image or use the eyedropper, the result says "if the text is …" and gives no pass or fail.
Why does it say it cannot find the text colour?
Automatic detection assumes the box holds two main colours and that the smaller one is the text. A photo or a gradient is a smear of colours rather than two groups, a box that is half letters and half background has no clear minority, and a box that also catches a third colour, such as a building, a button or the page around a banner, has no single smaller group to pick. In those cases it asks you instead of offering a suggestion: click a letter on the image, type the colour, or use the eyedropper if your browser has one.
What can I do if it fails?
Common fixes are a solid or semi-transparent panel behind the text, darkening or lightening the part of the image behind it, moving the text to a calmer part of the image, or changing the text colour. Where one colour would pass against everything in your box, including anything it set aside and was unsure about, the result lists it. Text shadows and outlines are not modelled, so if you rely on one, judge the result by eye as well.
Can I check a PDF or a design file?
Screenshot or export the page or frame as an image and load it here. For the structure of a PDF, such as its tags and language, use our PDF accessibility checker.
Which other free tools should I know about?
For two flat colours, WebAIM's Contrast Checker is quick, and so is our own colour contrast checker. For contrast on a live page, WAVE, axe DevTools and the Silktide toolbar are free and good. TPGi's Colour Contrast Analyser is a free desktop contrast tool. In February 2026 its former maintainer posted a notice on GitHub that he no longer works at TPGi, has lost access to the repository and can no longer update it; the latest release is from September 2025.
More free tools for the same job
-
Colour contrast checker
Two flat colours in, WCAG ratio and pass or fail out. The right tool when the background is one solid colour.
-
Accessibility bookmarklet
Runs checks on any live page in your own browser, which is where real contrast on a real page has to be measured.
-
PDF accessibility checker
A structural check of a PDF, run in your browser. It looks at tags and structure, not colour.
Contrast is one check; what the picture says is another
Colour is only half of what an image does on a page. GotAlt's alt text checker downloads the actual image file and compares it to the words with a vision model.
Check if my alt text is actually rightContrast is one check of many
The free scan runs 16 rule-based WCAG checks on up to 3 pages of your site: missing alt text, form labels, headings, page language, link text and more. No signup.
Scan my site — free