A touch target is the area that reacts when you tap. Make it too small and people miss, tap the wrong thing or give up. It hurts everyone with a tremor, a large thumb or a bumpy bus ride. The size that counts is the area that reacts, not the size of the icon drawn inside it.
The numbers
- 24 by 24 CSS pixels: the minimum of WCAG 2.2 level AA (success criterion 2.5.8, Target Size Minimum). It has exceptions, such as enough space around a small target, or a link inside a sentence.
- 44 by 44: WCAG 2.5.5 (Target Size Enhanced, level AAA) and Apple's Human Interface Guidelines, which use 44 points.
- 48 by 48: Material Design, which uses 48 dp, about 9 mm on a screen.
Both sides count. A 56 by 40 button fails a 44 minimum, and so does a tall, narrow 28 by 44 menu button.
Small icon, big target
The visible icon can stay small. Give the control padding so its hit area reaches the size you need, and the design does not change:
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.icon-button svg {
width: 20px;
height: 20px;
}Text links outside a paragraph need the same care. A list of links with no padding is a row of 20 px targets. Giving each link block display and padding-block: 12px makes the whole row tappable.
Space between targets
A target smaller than 24 px can still pass if a 24 px circle centered on it does not touch another target. Two 16 px icons with 4 px between them fail, because their circles overlap. Generous gaps are the easy fix, and they also stop a slip from hitting the next thing.
Checklist
- Measure the hit area in the browser's inspector, not the icon in the design file.
- Give toolbars, table rows and list rows a minimum height of 44 or 48.
- Keep 8 px between neighbouring controls.
- Make the label part of the target, so a checkbox or a radio reacts when you tap its text.
- Test with your thumb on a real phone, with one hand.
Practice
Fat Finger draws five screens with every control at its real hit area. Flag the ones under the minimum, then see the real numbers and why the sneaky ones fail.