Clickable Link Area mm

Clickable Link Area in Millimeters

A touch target is the physical patch a user has to land on with a finger or stylus. Turning CSS pixels into millimeters comes down to screen density. At the web baseline of 96 dpi, 1 px = 25.4 / 96 ≈ 0.2646 mm. More generally, mm = (px × 25.4) / dpi, where dpi is the display’s actual pixel density (say, 326 dpi on a Retina iPhone).

The big guidelines land in the same neighborhood, roughly 7–11 mm per side. WCAG 2.2 SC 2.5.5 (AAA) recommends 44×44 CSS px, which works out to about 11.6 × 11.6 mm at 96 dpi. Apple’s iOS HIG asks for 44×44 pt ≈ 7.5 × 7.5 mm on a 326 dpi Retina display. Google Material Design calls for 48×48 dp, about ~9×9 mm on most Android phones. In practice the mobile floor sits near 7×7 mm if you want to avoid mistaps.

Applications

Reach for this when you're auditing forms, navigation bars, icon toolbars, ad CTAs, or anything that needs to stay reachable with a thumb. It matters most for older users, accessibility audits, kiosk apps, automotive HMIs, and POS terminals, where gloves or shaky input are part of daily life.

FAQ

Why does the result change with dpi? A CSS pixel is a logical unit, and its real-world size moves inversely with display density. Push the dpi up and each CSS pixel shrinks in actual millimeters.

Should I always hit 44 px? 44 CSS px is the AAA target in WCAG. AA gets by with 24×24 px, but on a mobile-first design you're better off matching at least the iOS 44 pt or Material 48 dp mark.

Does spacing count? It does. WCAG will accept a smaller target as long as the inactive space around it forms a 24×24 px exclusion zone, which buys back the same hit-tolerance you'd get from a bigger target.