Touch target size

A fingertip lands on an area roughly a centimetre across, and it lands there without a cursor to aim with, because the finger covers the thing it is pointing at. Target size is the design response: make the region that reacts big enough that an approximate landing still counts.

The number to hold onto is that this is measured on the activation region, not on what is drawn. A 16 px icon in a 44 px button is a 44 px target. The same icon with no padding is a 16 px target that merely looks the same in a screenshot. Three figures are quoted in practice, and they do not agree because they are answering slightly different questions: WCAG 2.2 sets 24 by 24 CSS pixels as the AA floor (with exceptions for inline links and for targets that have enough spacing around them), Apple asks for 44 by 44 points, and Android asks for 48 by 48 density independent pixels. Clearing the WCAG floor is not the same as being comfortable. Anything a person will use one handed, in motion, or repeatedly deserves the platform figure.

Spacing counts as much as size. Two 44 px targets touching each other are worse than two 36 px targets with 12 px between them, because the failure mode people actually hit is the neighbouring control, not empty space. WCAG says as much: a small target can pass on spacing alone, since the offset from its neighbours is what protects it.

Size is also not only about fingers. A pointer driven by a trackpad, a head switch, eye tracking, or a shaky hand has the same problem a thumb has, which is why the success criterion is written about targets in general rather than about touch. If the design cannot spare the pixels, grow the region without growing the paint: extra padding, a pseudo-element that extends the hit area, or a larger row that carries the click on behalf of the icon inside it.