Touch Targets: Minimum Sizes and Spacing for Mobile
What a touch target is, the minimum sizes WCAG, Android, and Nielsen Norman Group recommend, and why spacing between controls matters as much as size.
What is a touch target, and how is it different from the drawing?
A 16-pixel icon can be exactly that icon on screen, but its touch target does not have to be 16 pixels. What matters to the user is the zone where a tap activates the control. If that zone is small, the user misses, tries again, and gets frustrated, even when the visual design is perfect.
This matters because a finger is much wider than a mouse pointer. Fitts’s Law explains that the time to reach a target depends on its distance and size, and that fast movements toward small targets increase errors. Nielsen Norman Group adds that targets used while walking or driving are harder to hit. You can review the model on the Fitts’s law page. If the control responds to a gesture rather than a tap, the problem changes: see mobile gestures.
What minimum size do the standards require?
The sources do not agree on units or values, so it helps to see them side by side:
| Source | Value | Level or context |
|---|---|---|
| WCAG 2.2, criterion 2.5.8 (Target Size, Minimum) | At least 24 × 24 CSS pixels | Level AA, with exceptions |
| WCAG 2.2, criterion 2.5.5 (Target Size, Enhanced) | At least 44 × 44 CSS pixels | Level AAA, with exceptions |
| Android (Accessibility, touch target size) | At least 48 × 48 dp, with 8 dp of separation | Google’s recommendation |
| Nielsen Norman Group | About 1 cm × 1 cm | Physical measure, based on a study by Parhi, Karlson, and Bederson (2006) |
Two details are easy to miss. First, WCAG 2.2 allows a target smaller than 24 pixels if a 24-pixel circle centered on it does not overlap any other target. Second, Nielsen Norman Group prefers a physical measure because it reflects what the user perceives, not a screen value. If you design for iOS, check Apple’s guidelines, which work in points (pt); the unit is not the same as a CSS pixel.
Why does spacing matter as much as size?
Nielsen Norman Group sets an order: targets must first be big enough, and then spaced well enough. If they are too small, adding space between them usually does not solve the problem. Spacing stops a tap from landing on the neighboring control; size stops a tap from landing on nothing.
In practice, spacing is the most neglected part. That is why Android’s guidance asks for 48 × 48 dp and also for 8 dp or more of space between controls. It acknowledges an exception too: with very small buttons placed very close together, the area cannot always be expanded without overlapping.
How do you apply this in design?
- Design the touch area separately from the drawing. If you start from a mobile-first design, this is the step most often skipped. In Figma or CSS, the icon can measure 16 pixels while the clickable container measures 44 or 48. Invisible padding does the work. On Android,
TouchDelegate(views) or a clickable container (Compose) enlarges the touch area without changing how the element looks. - Check spacing between controls. If two controls are less than 8 dp apart, check whether their areas overlap.
- Prioritize primary actions. Nielsen Norman Group recommends larger targets for primary actions, for older adults, for children, and for use while in motion.
- Test with a thumb. Open the prototype on a real phone, with one hand, without looking at the screen for more than a moment. What is hard then will be hard in real life.
- Document the value in your component library. A written rule stops each screen from inventing its own size. If the design system already defines spacing tokens, reuse them for the touch area.
When should you NOT apply the minimum value?
- Links inside a paragraph. WCAG has an exception for inline links: the surrounding text already defines their extent.
- Controls sized by the operating system. A native status bar or picker is not redesigned.
- When an accessible equivalent exists. WCAG allows a smaller target if the same function is available through another control of adequate size on the same page.
Do not use these exceptions as an excuse for small buttons. They are specific cases, not a general rule.
Example
Illustrative example: a task list with a 16-pixel trash icon and a 16-pixel edit icon, separated by 4 pixels.
- Problem: tapping the trash icon often opens the edit screen, because the areas overlap.
- Fix: each icon gets a 44 × 44 pixel container, with 8 pixels between containers. The drawing stays 16 pixels.
- Check: test on a real phone, with a thumb, during a minute of normal use.
The visual result barely changes. What the test checks is that the missed taps disappear. It is a good example of how interaction can improve without touching the style.
Common mistakes
- Confusing the icon’s size with the touch target’s size.
- Treating pixels, points, and dp as the same unit.
- Assuming spacing compensates for a target that is too small.
- Designing on desktop with a mouse and never testing on a phone.
- Leaving secondary navigation links so small that nobody can reliably tap them.
- Using different sizes for controls with the same function across different screens.
Sources
- W3C, Understanding SC 2.5.8: Target Size (Minimum)
- W3C, Understanding SC 2.5.5: Target Size (Enhanced)
- Nielsen Norman Group, Touch Target Size
- Google, Touch target size (Accessibility, Android)
- Laws of UX, Fitts’s Law