Screenshot Color Contrast Checker

The calculation. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and the darker colour, as defined by WCAG. The result is compared with the thresholds without rounding, as WCAG requires: 4.499:1 does not meet 4.5:1. The displayed value is truncated, never rounded up.

The thresholds. For text, success criterion 1.4.3 (level AA) needs 4.5:1, or 3:1 for large text; criterion 1.4.6 (level AAA) needs 7:1, or 4.5:1 for large text. Large text means at least 18 point, or 14 point bold; the tool converts the pixel size you enter (1 CSS pixel is 0.75 point), so 24 px or 18.67 px bold counts as large. For icons and the borders of controls, criterion 1.4.11 needs 3:1. These are the WCAG 2.2 values; the contrast criteria are unchanged from WCAG 2.1.

Choosing the colours. Load a screenshot and use Click picks text colour and Click picks background colour, which read exactly one pixel; or choose Drag a box around some text and its background, and the tool takes the most common colour as the background and the most contrasting frequent colour as the text. Suggest colour pairs samples a grid over the image and lists distinct pairs, lowest contrast first. Both of these are guesses from pixels: check each pair. You can also type two colours without any image.

Exceptions. WCAG exempts incidental text in photographs, decorative text, logotypes and inactive controls. The tool does not decide what is exempt.

PNG, JPEG and WebP images up to 30 MB, 12,000 px on a side and 40 megapixels (decided by the content of the file, not its name). Transparent pixels are treated as if drawn on white. You can also enter colours as #rgb, #rrggbb or rgb(r, g, b).

1. Optionally drop in a screenshot. Or skip this and type two colours.
2. Click the text, then switch to Click picks background colour and click the background; or drag a box around both.
3. Enter the text size and whether it is bold, or choose the non-text option for icons and borders.
4. Read the ratio and the pass/fail lines for AA and AAA, and look at the preview of the pair.

• Checking a mock-up or a competitor screenshot where only an image exists
• Verifying a colour pair a designer sent as a picture
• Finding the weakest text and background pairs in a screenshot of an app
• Preparing evidence for an accessibility review
• Checking whether grey placeholder text is readable enough

A screenshot is not the page. It may be scaled, compressed (JPEG changes colours around edges) and anti-aliased, so the pixel you pick can differ from the CSS colour. Pick the inside of a thick stroke, and re-check against the real colour values where you have them.

Text over images, gradients or patterns has no single background colour; the tool measures the pair you give it and cannot find the worst case. Automatic pair suggestions are heuristics, and a ratio alone does not make something accessible: size, spacing, font and context matter too.