Charts · 37

Touch targets, to scale

A 24 by 24 pixel button passes WCAG 2.2, and on an iPhone 16 it is 4.0 mm across: under half the patch of fingertip that lands on it. The guidelines are written in CSS pixels, points and dp, and a finger is measured in millimetres, so the same rule is a different size on every screen. Here are the common targets at their physical size on the screen you pick, next to the finger that has to hit them. Calibrate with a bank card and they are life-size.

Show sizes as on

This screen: about 96 CSS px per inch, the CSS inch, until the page has looked at this screen. For true size, measure it.

On this screen, WCAG’s 24 px minimum is 6.3 mm square. A fingertip lands on 8 to 10 mm.

  • WCAG 2.2 minimum24 × 24 CSS px6.3 mm

  • WCAG enhanced44 × 44 CSS px11.6 mm

  • Apple44 × 44 pt11.6 mm

  • Material48 × 48 dp12.7 mm

  • Fingertip contact8 to 10 mm

  • Index finger, width16 to 20 mm

  • Thumb, widthabout 25 mm

Each square is a target drawn at the size it would be on the screen you picked; the dashed circle is a 9 mm fingertip contact centred on it. Below them, fingers at their measured widths. Hover or tap any of them for the rule or the source.

Each target in millimetres, by screen
TargetiPhone 16Pixel 8Android baselineMacBook Air 13-inch24-inch 1080p monitorThe CSS inch
WCAG 2.2 minimum24 × 24 CSS px4.03.73.84.76.66.3
WCAG enhanced44 × 44 CSS px7.36.97.08.712.211.6
Apple44 × 44 pt7.36.97.08.712.211.6
Material48 × 48 dp8.07.57.69.513.312.7
What the studies ask for, in CSS pixels, by screen
FindingiPhone 16Pixel 8Android baselineMacBook Air 13-inch24-inch 1080p monitorThe CSS inch
9.2 mmParhi, Karlson and Bederson, MobileHCI 200656 px59 px58 px47 px33 px35 px
9.6 mmParhi, Karlson and Bederson, MobileHCI 200658 px62 px60 px49 px35 px36 px
10 mmNielsen Norman Group, Touch targets on touchscreens (2019)60 px64 px63 px51 px36 px38 px

Screens: iPhone 16, 153.3 CSS px per inch (460 ppi, 3 device pixels to a CSS pixel); Pixel 8, 163.0 CSS px per inch (428 ppi, 2.625 device pixels to a CSS pixel); Android baseline, 160.0 CSS px per inch (one dp is one pixel at 160 dpi, by definition); MacBook Air 13-inch, 128.6 CSS px per inch (224 ppi, shown at the default 1470 × 956); 24-inch 1080p monitor, 91.8 CSS px per inch (about 92 ppi, 1 device pixel to a CSS pixel); The CSS inch, 96.0 CSS px per inch (CSS defines 1in as 96px; few real screens match it).

Notes

Physical size is 25.4 mm divided by the CSS pixels a screen shows per inch, which is its pixel density divided by its device pixel ratio. The same 44 CSS px is 7.3 mm on an iPhone 16 and 12.2 mm on a 24-inch 1080p monitor, where the pointer is a one-pixel arrow. Screen densities are from Apple’s and Google’s published specs (iPhone 16: 2556 × 1179 at 460 ppi; Pixel 8: 1080 × 2400 at 428 ppi, a 412 px wide viewport; MacBook Air 13-inch: 2560 × 1664 at 224 ppi, shown at 1470 × 956 by default). Android defines a dp as one pixel at 160 dpi and rounds real screens into density buckets, so a dp on a given phone is close to 1/160 inch, not exactly; Google gives 48 dp as about 9 mm, while 48 dp at the 160 dpi baseline works out to 7.6. Physical size always depends on the device, the zoom and the user’s text-size setting; without calibration, this screen’s figure is a guess from its input type and pixel ratio.

Fingers: the MIT Touch Lab’s widely cited figure puts the average adult index fingertip at 1.6 to 2 cm wide; the 8 to 10 mm contact patch and the 25 mm thumb are the figures design guides give alongside it (Ubuntu’s finger-UI guide and Smashing Magazine respectively), and are less directly sourced. Accuracy matters more than the finger’s size: Parhi, Karlson and Bederson measured one-handed thumb use and found 9.2 mm targets enough for single taps and 9.6 mm for runs of taps, which is where Nielsen Norman Group’s 1 cm minimum comes from. A target can be larger than what is drawn: padding counts, which is how a 24 dp icon carries a 48 dp target.

Sources: W3C, WCAG 2.2, Understanding 2.5.8 Target Size (Minimum) and 2.5.5 Target Size (Enhanced); Apple, Human Interface Guidelines, Buttons; Google, Android Accessibility Help, Touch target size; Dandekar, Raju and Srinivasan, 3-D finite-element models of human and monkey fingertips to investigate the mechanics of tactile sense, Journal of Biomechanical Engineering 125 (2003), MIT Touch Lab; Aurora Harley, Touch targets on touchscreens, Nielsen Norman Group (2019); Anthony T, Finger-friendly design: ideal mobile touchscreen target sizes, Smashing Magazine (2012); Pekka Parhi, Amy Karlson and Benjamin Bederson, Target size study for one-handed thumb use on small touchscreen devices, MobileHCI 2006; ISO/IEC 7810, ID-1 card size (85.60 × 53.98 mm); CSS Values and Units Level 4 (1in = 96px).