Anti-aliasing tolerance in screenshot comparison

The pixels at the edge of everything

A letter or a rounded corner cannot be drawn exactly on a pixel grid, so renderers shade the edge pixels with in-between colours to make the shape look smooth. How much shading, and in which pixels, depends on the browser, the operating system, the GPU, the font hinting and the zoom. Render the same page twice on two machines and the shapes are identical while hundreds of edge pixels differ — enough to make a strict diff useless.

How it is detected

For each pixel that differs, ComparePicture looks at its eight neighbours in both pictures. An anti-aliased pixel sits on a short gradient: it has a darker neighbour and a lighter neighbour, few neighbours of exactly its own colour, and at least one of those darker or lighter neighbours belongs to a flat area present in both pictures. Pixels that fit are treated as rendering differences, drawn in amber if you want to see them, and left out of every count and every change region.

When to turn it off

Turn it off when the edges are the point: checking that an icon was redrawn, that a font weight changed, or that an export is byte-for-byte faithful. The Exact preset on the pixel diff page does that, along with setting the threshold to zero.

What it will not hide

A real change to a shape — a letter replaced, a border thickened, a button moved — produces runs of differing pixels that are not one-pixel gradients between shared flat areas, so it is still reported. If something you expected to see is missing, lower the minimum region size or the threshold before blaming the anti-aliasing filter.