WCAG Contrast Checker

pick colours from the image · AA and AAA · normal and large text

Most contrast checkers make you know the hex codes. This one takes a screenshot: click the text, click the background behind it, and get the ratio with the WCAG 2.2 verdicts. That matters when the colours are not in your control — a rendered PDF, a competitor's page, a design comp, a screenshot from someone else's ticket.

How to check contrast from a screenshot

1. Drop the screenshot. It loads into the picker above.
2. Click the text. Aim for the darkest, most solid part of a letter stroke — the middle of a thick stem, not an edge.
3. Click the background right beside it. The tool alternates between the two targets automatically; use the selector to override which one the next click sets.
4. Read the verdicts. You get the ratio plus AA, AAA and the 3:1 non-text threshold, adjusted for the text size you selected.

Anti-aliasing will lie to you

This is the one thing to get right. Text on screen is anti-aliased, so the pixels at a letter's edge are a blend of the text colour and the background — sampling one of those gives you a ratio that is better than the truth, sometimes dramatically. Always click the centre of a thick stroke, and zoom the screenshot in before you drop it if the text is small. If two clicks a pixel apart give noticeably different answers, you are in the anti-aliased fringe.

Sub-pixel rendering makes it worse by tinting those edge pixels red and blue. On a screenshot of LCD-rendered text you may find no pixel that is the pure text colour at all, in which case take the darkest one you can find and treat the result as an upper bound on the real contrast.

What the thresholds mean

AA requires 4.5:1 for normal text and 3:1 for large text — 18pt, or 14pt bold, which is roughly 24px and 18.66px on a default web page. This is the level most legislation and procurement rules cite, and the one to design to. AAA raises it to 7:1 and 4.5:1; it is worth meeting for body copy on a content-heavy site and is rarely required outright.

The third line, 3:1, covers success criterion 1.4.11: user interface components and meaningful graphics. Input borders, focus indicators, icons that carry information and chart elements all need 3:1 against what is adjacent to them. It is the criterion most often missed, because designers check their text and forget the border of the field it sits in.

The ratio itself comes from relative luminance — each channel linearised from sRGB, then weighted 0.2126, 0.7152, 0.0722 — as (L1 + 0.05) / (L2 + 0.05). It runs from 1:1 for identical colours to 21:1 for black on white. Note that it ignores hue entirely: two colours can have identical luminance, score 1:1, and be completely different colours. Use the colour blindness simulator for the questions contrast ratio cannot answer.

FAQ