Mobile Tap Target Size WCAG

Mobile tap target size (WCAG)

A tap target is whatever part of a control actually reacts when a finger lands on it. Under WCAG 2.1, Success Criterion 2.5.5 Target Size (AAA) asks for at least 44 × 44 CSS px. WCAG 2.2 then added a lower bar with SC 2.5.8 Target Size (Minimum), which sets 24 × 24 CSS px as the AA floor. Apple's Human Interface Guidelines land on 44 × 44 pt, while Material Design goes a bit higher at 48 × 48 dp and wants 8 dp or more between neighbouring targets.

What sits underneath all of this is Fitts's Law: MT = a + b · log₂(D/W + 1). Movement time (MT) drops as the target width (W) gets bigger. On a phone the contact pad of an adult thumb covers roughly 45–57 px, so anything narrower than that makes people aim carefully with their eyes and miss more often. The problem is worse in the hard-to-reach zones near the top of the screen when you're holding the phone in one hand.

Applications

Reach for this calculator while auditing buttons, links, checkboxes, tab bars, FAB controls or form inputs on mobile and PWA interfaces. It also feeds into compliance reports for WCAG 2.1/2.2, Brazil's eMAG 3.1 (Modelo de Acessibilidade em Governo Eletrônico), ABNT NBR 17225 and EN 301 549, the standard cited in EU procurement.

FAQ

Is 24 × 24 px really enough? Treat it as the bare AA floor from WCAG 2.2, nothing more. Primary actions and tightly packed lists still deserve the 44 × 44 AAA recommendation.

Can the visual icon be smaller than the tap area? It can. The rule is about the hit region, not the artwork. Keep the icon small and stretch the clickable area with padding or an invisible ::before overlay.

Does spacing count toward the size? When neighbouring targets overlap the 24 px circle, you either pull them apart or make them bigger. eMAG 3.1 spells out gaps of 8–10 px to keep fingers from triggering the wrong thing.