Image Contrast Checker

How it works

Finding the text. Contrast under WCAG depends only on luminance, so the pixels inside your box are split by luminance into two groups with Otsu’s method. Letters are thin strokes and backgrounds are solid areas, so the group made of thinner shapes is taken as the text. A patch of the background as light as the letters, such as the sun or a reflection, is much thicker than a stroke and is put back into the background, so the hardest part of the background is not lost. Most pixels of a thin letter are blended with the background by anti-aliasing and image compression, so the text color is taken from the far end of the text pixels: the 2% farthest from the background are skipped as compression artifacts, and the next 6% are averaged. That is the core color of the letter, close to what W3C technique G18 asks for (two pixels in from the edge).

Which background counts. W3C failure F83 checks the background behind each letter, and technique G18 measures the background pixels next to the letter. So only background within about three stroke widths of the letters is measured, and a loose box with empty margins gives the same result as a tight one. The one-pixel ring touching the letters is left out, because anti-aliasing blends it with the text; measuring starts from the next pixel out.

The ratio. The ratio is computed with the WCAG 2 formula between the text color and each measured background pixel. Semi-transparent text, typed as rgba(), is first blended over each pixel the way a browser blends it. The worst 10% is the 10th percentile: nine background pixels in ten are at least that good. The red overlay shows the background pixels below the target you chose, 4.5:1 for normal text or 3:1 for large text.

The weakest spot. The weakest spot is the weakest patch of background, not the weakest single pixel. Each background pixel whose eight neighbors are also background is replaced by the median luminance of that 3×3 block, and the lowest ratio among them is circled. A lone noisy pixel or a line one pixel wide cannot win; at least five pixels of the block have to be that weak. WCAG sets no statistic for a photo, and the worst 10% is looser than the per-letter check in F83, so the verdict and the badges use whichever is lower, the spot or the worst 10%. Readers can lose letters at a weak spot even when the rest of the image is fine.

APCA. APCA Lc is computed for the text color against the same background pixels with the apca-w3 package, unmodified, and shown with its sign: negative means light text on a dark background. As with the ratio, the weaker of the circled spot and the weakest 10% (by the size of Lc) sets the APCA level and the minimum font sizes, so a line that vanishes over one part of the image cannot pass APCA on the rest. As with the WCAG ratio, summing up the pixels this way is our method; APCA itself compares two solid colors.

When the result can mislead

• If the guess is wrong, for example very bold text in a tight box, press “Swap” or set the text color by hand.
• Very thin or tiny text gives few text pixels, so draw the box around just that text.
• In a JPEG or a scaled-down screenshot the text color is an estimate; if you know the real color, type it in.
• Semi-transparent text changes color over each part of the image. Type its CSS color, such as rgba(255, 255, 255, 0.75), and it is blended over each pixel; otherwise the checker uses one color, taken from the core of the letters.
• Gradient or textured text is measured by its most contrasting part, so the result can be better than the weakest letter really is.
• The weakest spot is looked for at least two pixels from the letters, and a dark gap narrower than about two pixels is smoothed away; in a small screenshot, check the letters themselves too.
• The APCA font sizes are for the text as it appears on the page, so compare them with the CSS size, not with the size in a scaled screenshot.
• Text with its own shadow or outline is measured against the background, not the shadow, so the real contrast may be better than shown.

Your image stays on your device

The image is processed in your browser. Nothing is uploaded or stored.