Verifying a screenshot you don't have the source design for — a marketing page, a competitor's interface, a PDF render, or a client's production site. Checking a logo or graphic on a complex photographic background where there's no single "background colour" to test against. Testing worst-case contrast along a gradient, a soft shadow, or behind semi-transparent text layers. Comparing two UI states (button at rest vs. hover, focus ring on different backgrounds) without rebuilding the design or extracting values. Auditing text on a dark or light mode screenshot to verify both render correctly. Spot-checking whether a real-world rendered interface meets accessibility thresholds before it ships.

Upload an image: JPG, PNG, or WebP. The tool scales large images down for performance but preserves colour accuracy of the displayed pixels. Click your first point: Position your cursor over the first colour you want to sample (e.g. text) and click. The tool reads the pixel colour at that spot. Click your second point: Click the second colour (e.g. background). The contrast ratio is calculated immediately. Adjust sampling radius: Use the radio buttons or slider to choose between 1 pixel (precise, noisy) or a 3×3 or 5×5 average (smoother, more human-readable). Re-click points if you change the setting. Read the verdict: The tool shows the contrast ratio as a number and tells you which WCAG levels it passes. If it fails, you'll see which level it fell short of.

Anti-aliasing on text edges. The edge of a rendered letter isn't a single colour; it's a blend of the text colour and the background. Always click the middle of a thick letter stroke, never the edge. Use a 5×5 average to smooth out the blend. JPEG compression noise. Flat colour regions in compressed images show colour drift across neighbouring pixels. A 5×5 average will stabilise this; 1-pixel sampling will give erratic results. Translucent or semi-transparent layers. This tool samples the rendered pixel you see on screen — which is exactly right. If text is rendered semi-transparent over a background, the sampled colour is the blended result, and that's what matters for contrast. You're checking rendered output, not design intent. If a button passes AA at rest in one screenshot but fails at hover in another, both failures are real accessibility problems. This tool checks what users actually see. Image scaling for performance. Very large images are scaled down for display and sampling. If you need to check a tiny UI element with pixel-perfect precision, crop it in an image editor before uploading.

Image Contrast Checker

Click any two points in an image to check WCAG contrast — AA, AAA, large-text thresholds. Built for designers verifying real screenshots, not just hex codes.

Pick or drop an image (PNG, JPG, WebP, screenshot)

Sample Clicking the image alternates between Foreground and Background samples.

🔒 Files never leave your browser — no upload, no server, no tracking.

Image (click to sample)

No image yet.

Samples

Foreground (next click)

—

Background

—

Result

Sample two colours to see the contrast ratio.

What is this for?

Standard WCAG contrast checkers require you to input hex codes or RGB values — but when you're auditing a real design, you don't have those values. You have a screenshot, a rendered UI, a logo on a photograph. This tool lets you upload an image and click any two points to sample their actual rendered colours, then compute the WCAG 2.1 contrast ratio between them. It shows you pass/fail verdicts for AA, AA-large, AAA, AAA-large, and the non-text UI components threshold (1.4.11), all in your browser.

When to use it

Verifying a screenshot you don't have the source design for — a marketing page, a competitor's interface, a PDF render, or a client's production site.
Checking a logo or graphic on a complex photographic background where there's no single "background colour" to test against.
Testing worst-case contrast along a gradient, a soft shadow, or behind semi-transparent text layers.
Comparing two UI states (button at rest vs. hover, focus ring on different backgrounds) without rebuilding the design or extracting values.
Auditing text on a dark or light mode screenshot to verify both render correctly.
Spot-checking whether a real-world rendered interface meets accessibility thresholds before it ships.

How it works

Upload an image: JPG, PNG, or WebP. The tool scales large images down for performance but preserves colour accuracy of the displayed pixels.
Click your first point: Position your cursor over the first colour you want to sample (e.g. text) and click. The tool reads the pixel colour at that spot.
Click your second point: Click the second colour (e.g. background). The contrast ratio is calculated immediately.
Adjust sampling radius: Use the radio buttons or slider to choose between 1 pixel (precise, noisy) or a 3×3 or 5×5 average (smoother, more human-readable). Re-click points if you change the setting.
Read the verdict: The tool shows the contrast ratio as a number and tells you which WCAG levels it passes. If it fails, you'll see which level it fell short of.

How sampling radius affects your results

A 1-pixel sample is mathematically precise but picks up anti-aliasing, JPEG compression artefacts, and subpixel rendering noise. For most designed UI, use a 5×5 average — it returns the colour a human eye would perceive, not the noise of the exact pixel. Use 1 pixel when you're checking a crisp edge, a logo boundary, or a colour that's supposed to be exact (e.g. a brand colour swatch). The 3×3 option is a compromise for medium-precision checks.

Common gotchas

Anti-aliasing on text edges. The edge of a rendered letter isn't a single colour; it's a blend of the text colour and the background. Always click the middle of a thick letter stroke, never the edge. Use a 5×5 average to smooth out the blend.
JPEG compression noise. Flat colour regions in compressed images show colour drift across neighbouring pixels. A 5×5 average will stabilise this; 1-pixel sampling will give erratic results.
Translucent or semi-transparent layers. This tool samples the rendered pixel you see on screen — which is exactly right. If text is rendered semi-transparent over a background, the sampled colour is the blended result, and that's what matters for contrast.
You're checking rendered output, not design intent. If a button passes AA at rest in one screenshot but fails at hover in another, both failures are real accessibility problems. This tool checks what users actually see.
Image scaling for performance. Very large images are scaled down for display and sampling. If you need to check a tiny UI element with pixel-perfect precision, crop it in an image editor before uploading.