How to check text colour contrast from a screenshot (WCAG AA and AAA)

Open a screenshot in Color picker, pick the text colour into Foreground and the colour behind it into Background. The contrast ratio appears under the two colours, with Pass or Fail for each WCAG 2.2 threshold and a text sample drawn in your colours.

Steps

1. Take a screenshot of the button, banner or page you want to check, and save it as PNG.
2. Open Color picker and drop in the screenshot.
3. Under Pick into, choose Foreground, then click a pixel in the middle of a letter. Thick letters are easier to hit.
4. Switch Pick into to Background and click the area right behind the text.
5. Read the ratio and the five Pass or Fail lines. Adjust a colour by typing a new hex value into its field; the check updates at once.

What the thresholds mean

The check uses the contrast ratio from the Web Content Accessibility Guidelines (WCAG 2.2). The ratio runs from 1:1, the same colour twice, to 21:1, black on white.

WCAG counts text as large from about 24 px, or about 18.7 px when bold. Level AA is the one most accessibility policies ask for.

The tool shows the ratio cut down to two decimals and never rounds it up, so a pair at 4.49:1 cannot read as passing 4.5:1.

Picking accurate colours from a screenshot

Screen text is drawn with smoothing, so the edge of each letter blends into the background. Picking an edge pixel gives a lighter colour than the real text and makes contrast look worse than it is. The magnifier shows an 11 × 11 grid around the pointer; look for a run of identical pixels inside a stroke and pick from there.

Other things that throw readings off:

• Screenshots saved as JPG. Compression shifts colours slightly around text. Use PNG.
• Text over a photo or gradient. The background changes under each letter. Check the lightest and the darkest spot behind the text; both must pass.
• Semi-transparent text. The colour you see is a mix with the background, which is what the reader sees too, so picking the visible pixel is correct.
• Night mode or colour filters. Turn them off before taking the screenshot.

Fixing a pair that fails

You can test changes without leaving the page. Type a darker text colour into the Foreground field, as hex, RGB or HSL, and watch the ratio climb. HSL is the easiest to adjust by hand: lowering the last number (lightness) darkens the colour without changing its hue, so a brand colour stays recognisable.

When the pair passes, copy the new hex code and update your design.

Questions

Does this replace a full accessibility audit?

No. It checks colour contrast for one pair at a time. Readability also depends on font size, weight, spacing and how the page behaves, which a screenshot cannot show.

Can I check two colours without an image?

Yes. Type or paste a value into each colour card's field. The contrast check works the same way.

Why does the sample text look different from my design?

The sample uses the page's own typeface at fixed sizes. Only the colours are yours.

Is my screenshot uploaded?

No. It is read in your browser and stays on your device, which matters for unreleased designs and client work.

How do I get the hex code of one colour?

Pick it and press Copy next to HEX. More in getting a hex code from an image.