Touch Target Size & Spacing Checker

The solid squares are the targets and the dashed circles are the 24-pixel circles the spacing exception draws around them. Where two circles overlap, the pair fails. Nothing is uploaded.

The 24-pixel rule is a rule about centre distance

WCAG 2.2 asks for 24 by 24 CSS pixels, then lets anything smaller through if a 24-pixel-diameter circle centred on it clears its neighbours' circles. Two circles of radius 12 miss exactly when their centres are 24 apart — so the exception is a statement about centre-to-centre distance, and a small target is fine as long as it is far enough away from the next one.

Every pixel taken off the target has to come back as a pixel of gap — not roughly, exactly. A target at or above 24 needs no gap at all. And the AAA criterion at 44 pixels carries no spacing exception, which is why the two numbers are not two opinions about the same thing.

So conformance is a property of the layout, not the button

The same control passes in one arrangement and fails in another, with nothing about the control changed. Which is why "is this button big enough" cannot be answered by looking at the button, and why a component library cannot promise conformance on its own.

The distance is measured centre to centre rather than edge to edge, and the circle is a circle — vertical separation counts exactly as much as horizontal, and a diagonal neighbour is measured diagonally. A target with nothing near it passes at any size at all.

A row of small targets is not actually smaller

Because the shortfall comes straight back as required gap, shrinking the icons reclaims almost nothing. A row of 5 conforming targets is 120px wide at 24px each and 104px at 8px each.

The width has a closed form: 24 × n, minus the one gap that is not needed after the last target. So shrinking an icon buys back its own missing gap once, and nothing after that. Reducing a 24px icon to 8px across 5 targets saves 16px in total — while making every one of them harder to hit.

What size buys in speed

Fitts's law puts movement time at a + b·log₂(D/W + 1). Bigger is faster, but logarithmically, so doubling a target does not halve the time to hit it — and the second doubling buys less than the first.

Only the ratio D/W matters, so halving the distance and doubling the size are worth exactly the same — moving a control closer is as good as making it bigger. The constants here are ordinary values for a finger or mouse and are meant to show the shape of the curve, not to predict anyone's actual milliseconds.