Verifying a screenshot you don't have the source for — a marketing page, a competitor's UI, a PDF. Auditing a logo on a busy photographic background where the "background colour" isn't a single value. Checking the worst-case contrast along a gradient or behind translucent text. Quickly comparing two UI states (e.g. button rest vs hover) without rebuilding the design.

Anti-aliasing. Text edges average out to colours that aren't in the design intent. Click the middle of a letter stroke, not its edge. JPEG compression. Highly compressed images have colour drift in flat regions. A 5×5 average smooths over the drift. Translucent layers. The rendered pixel is what matters for contrast, not the source colour. This tool reads the rendered pixel — exactly what you want. You're checking the colours, not the design intent. If your real-world rendered button passes AA at rest but fails on hover in another screenshot, both states are accessibility failures. Image scaling. The tool scales large images down for performance. The sampled pixel reflects the displayed pixel; if you need pixel-perfect sampling of a very small UI element, crop the image 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?

WCAG contrast checkers normally need two hex codes — but a designer doing an accessibility pass on a real screenshot doesn't have hex codes, they have pixels. This tool lets you upload an image (a screenshot, a hero design, a logo on a busy background) and click any two points. It samples the colour under the cursor (1 pixel or a 3×3 / 5×5 average) and computes the WCAG 2.1 contrast ratio between them. Verdict for AA, AA-large, AAA, AAA-large, and the UI components threshold (1.4.11). All in the browser.

When to use it

Verifying a screenshot you don't have the source for — a marketing page, a competitor's UI, a PDF.
Auditing a logo on a busy photographic background where the "background colour" isn't a single value.
Checking the worst-case contrast along a gradient or behind translucent text.
Quickly comparing two UI states (e.g. button rest vs hover) without rebuilding the design.

How sampling works

A single-pixel sample is precise but noisy — anti-aliased edges, JPEG artefacts, and subpixel rendering all cause neighbouring pixels to differ. The 5×5 average is usually what you want for designed UI: it returns the colour a human would describe, not the exact pixel under the click. Use 1px when checking a logo edge or a sharp colour boundary.

Common gotchas

Anti-aliasing. Text edges average out to colours that aren't in the design intent. Click the middle of a letter stroke, not its edge.
JPEG compression. Highly compressed images have colour drift in flat regions. A 5×5 average smooths over the drift.
Translucent layers. The rendered pixel is what matters for contrast, not the source colour. This tool reads the rendered pixel — exactly what you want.
You're checking the colours, not the design intent. If your real-world rendered button passes AA at rest but fails on hover in another screenshot, both states are accessibility failures.
Image scaling. The tool scales large images down for performance. The sampled pixel reflects the displayed pixel; if you need pixel-perfect sampling of a very small UI element, crop the image before uploading.