Touch target size
Why size matters
A target is anything a user can tap or click. Small or crowded targets cause mis-taps, especially for people with tremors, limited dexterity or large fingers, and for anyone using a phone with one hand.
Fitts’s law explains the effect: the time to reach a target grows with distance and shrinks as the target gets larger.
The numbers
24 × 24 CSS px
WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA.
44 × 44 CSS px
WCAG SC 2.5.5 Target Size (Enhanced), level AAA.
44 pt
Apple’s Human Interface Guidelines recommend a minimum control size of 44 by 44 points.
48 dp
Material Design recommends touch targets of at least 48 by 48 dp.
Spacing and exceptions
WCAG 2.5.8 has a spacing exception: a target smaller than 24 px passes if a 24 px circle centred on it does not overlap another target or the circle of a neighbour. So tiny icons can pass when they are well separated.
- Inline links inside a sentence are exempt, because their size is set by the text.
- Targets whose size is controlled by the browser, such as default checkboxes, are exempt.
- An equivalent larger control on the same page can also satisfy the rule.
Applying it
- Design the hit area, not only the visible shape. A 16 px icon can sit inside a 44 px button.
- In CSS, add padding to icon buttons, for example <code>padding: 12px</code> around a 20 px icon.
- Leave gaps between neighbouring controls, such as rows of action icons.
- Place frequent actions within easy thumb reach, usually the lower part of a phone screen.
Treat 24 px as the floor and 44 to 48 px as the comfortable target for primary controls.
Most target-size failures come from icons and compact controls, not from main buttons.
- Close buttons, menu dots and pagination links drawn at the size of their icon.
- Rows of small icon actions in tables with no gap between them.
- Tiny checkboxes and radio buttons where only the box, not the label, is clickable.
- Dense toolbars copied from desktop layouts onto touch screens.
Make the label part of the click area so a larger target comes for free.
Sources
- W3C. Understanding SC 2.5.8 Target Size (Minimum). https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- W3C. Understanding SC 2.5.5 Target Size (Enhanced). https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.