← All ContrastRadar guides

Troubleshooting

Why Screenshot Contrast Measurements Change Around the Same Text

See how antialiasing, scaling, compression, OCR bounds, and mixed backgrounds can change a contrast estimate without changing the intended design colors.

Published Updated

Pick a dark text color and a light background in a design tool and the contrast calculation is straightforward. Measure the same text from a screenshot and dozens of intermediate colors appear along the glyph edges. A single line may also cross a shadow, gradient, or compressed image block.

That is why screenshot checkers can disagree with a design-token calculator even when both calculations are implemented correctly. The difficult part is deciding which rendered pixels represent the foreground and which represent the background.

Antialiasing creates colors that were never in the palette

Font rasterization blends edge pixels with the background to make curves and diagonals look smooth. Sampling an edge pixel as the text color produces a lower contrast than sampling the glyph core. The balance changes with display scale, font rendering, and image resizing.

ContrastRadar looks for core foreground pixels instead of treating every pixel inside the OCR rectangle as text. It also excludes a thin band near the OCR-box edge when choosing foreground candidates, reducing the chance that a nearby button border is mistaken for a glyph.

An OCR rectangle is a location, not a glyph mask

Apple Vision returns recognized text observations with normalized bounding regions and confidence values. A line box normally includes empty space between letters and may include nearby decoration. Color estimation has to refine that loose region before it can compare foreground and background.

ContrastRadar samples inside the region and in a nearby ring, clusters similar colors, and separates retained glyph components from the surrounding background. If recognition joins unrelated text or misses a small label, the resulting box and color estimate can still be wrong.

One line can have more than one valid background

A gradient, photograph, translucent panel, or shadow means there is no single background swatch behind the whole line. ContrastRadar estimates a local background for retained glyph components and summarizes the measurements with a typical value, a weaker local estimate, and passing-area coverage.

Those summaries answer different questions. The typical value describes most of the rendered text; the weaker estimate helps locate a vulnerable portion; coverage shows how much of the sampled area reaches the selected WCAG threshold. Do not report only the most favorable number when the line visibly crosses a changing background.

How to investigate an unexpected result

Return to the original-size capture, select the finding, and compare the foreground and background swatches with the highlighted pixels. Check whether the image was resized, recompressed, or captured at a different display scale. If the result has medium or low confidence, confirm the colors in the source design or browser inspector.

A screenshot estimate should be reproducible for the same pixels, but it is not expected to match a source-color calculation after the pixels have been transformed. Preserve the original export when a review decision depends on a narrow threshold.