A touch target is the interactive area of a touchscreen interface that responds to a finger tap, such as the hit region of a button, icon, link or checkbox. In mobile UX, the term matters because the touch target is often larger than the visible control: a 24-point icon can sit inside a 44-point tappable region, and the size of that region, not the drawing, decides whether users hit the control on the first attempt.
The synonym tap target is common in web performance and accessibility tools. Both terms describe the same concern: making controls large enough and far enough apart for imprecise human fingers on small screens.
Why touch targets need a minimum size
A finger is a blunt, imprecise pointer compared with a mouse cursor. The contact patch of an adult fingertip is commonly measured at roughly 8 to 10 millimeters wide, and the finger hides the very element it is trying to touch, a problem known as occlusion. Users also tap while walking, holding the phone in one hand or wearing gloves, which adds further error.
Fitts’s law explains the effect formally: the time and error rate of pointing grow as the target gets smaller and farther away. Small targets therefore cause mis-taps, repeated attempts and accidental actions, which users experience as a frustrating or broken interface.
Device-independent units keep these sizes consistent across screens. Platform guidelines express targets in points on iOS, density-independent pixels on Android and CSS pixels on the web, so the physical size stays similar regardless of pixel density.
Recommended sizes in platform and accessibility guidelines
Major design systems and accessibility standards publish explicit minimum sizes. They differ slightly because they balance accessibility against information density in different ways.
| Guideline | Recommended minimum | Notes |
|---|---|---|
| Human Interface Guidelines | 44 by 44 points | Applies to iOS and iPadOS controls |
| Material Design | 48 by 48 dp | Roughly 9 mm on most devices |
| WCAG 2.2 target size minimum | 24 by 24 CSS pixels | Level AA, with a spacing exception |
| WCAG target size enhanced | 44 by 44 CSS pixels | Level AAA, stricter goal |
The WCAG Level AA rule allows smaller targets when enough empty space surrounds them, so that a 24-pixel circle centered on each target does not overlap another target. Inline links within a sentence and controls whose size is set by the browser are also exempt. Most product teams treat 44 to 48 units as the practical baseline and use the smaller figure only for dense, secondary controls.
Visible size, hit area and spacing
A well-designed control separates visual size from interactive size. Designers can keep a compact icon while extending its hit area with padding, an invisible frame or platform features such as touch delegates on Android. The user sees a tidy interface but receives a forgiving target.
| Property | What it means | Typical recommendation |
|---|---|---|
| Hit area | Region that registers the tap | At least 44 to 48 units square |
| Visual size | Drawn icon or label | Can be smaller, often 20 to 24 units |
| Spacing | Gap between adjacent targets | About 8 units or more |
| Placement | Position on the screen | Primary actions within easy thumb reach |
| Feedback | Visual or haptic response to a tap | Immediate pressed state |
Spacing is as important as size. Two large targets placed edge to edge still produce errors because a tap near the border is ambiguous. Overlapping hit areas should be avoided; when the system resolves a tap that falls between targets, it usually picks the nearest center, which may not match the user’s intent.
Touch targets and related mobile UX concepts
Touch target size interacts with several neighboring concepts in mobile UX. The table below shows where each concept adds a different constraint.
| Concept | Main concern | Effect on touch targets |
|---|---|---|
| Thumb zone | Reachability in one-handed use | Places frequent targets low and central |
| Safe area | Notches, rounded corners, system bars | Keeps targets away from obstructed edges |
| Gesture navigation | System swipes from screen edges | Avoids targets that conflict with edge gestures |
| Dynamic Type | User-controlled text size | Targets must grow with larger text |
| Bottom navigation | Primary destinations at the bottom | Gives each destination a full-height target |
These constraints are cumulative. A button can meet the size minimum and still fail if it sits under the home indicator or in a corner that the thumb cannot reach comfortably.
Common mistakes and how to test
Most touch target problems come from designs approved on large desktop monitors, where everything looks precise and clickable. The following errors appear repeatedly in audits.
- Icon-only buttons with no padding, such as a 16-point close icon in a dialog corner.
- Dense lists of text links placed on adjacent lines without spacing.
- Destructive actions next to frequent actions, such as delete beside edit.
- Custom controls that ignore platform minimums or shrink when the layout is compressed.
Testing should combine automated checks and real use. Accessibility scanners flag targets below a threshold, but only testing on physical devices, one-handed and in motion, reveals whether placement and spacing work in daily use.
On the mobile web, the usual fix is to give links and buttons padding or a minimum height and width in CSS rather than enlarging the font. Pseudo-elements can extend the hit area of a small icon without changing the layout. Designers should also check that targets keep their size when the page is zoomed or when the user increases the system text size, because rigid containers often clip or squeeze controls in those states.
Finally, teams should agree on one documented minimum in the design system, apply it to every component and review exceptions explicitly. A shared rule prevents the gradual shrinking of controls that happens when individual screens are tuned for density.
A non-technical view
A touch target is the part of the screen that reacts when you tap it. It is like the doorbell on a house: if the button is tiny and placed next to another one, visitors will often ring the wrong bell.
Good apps make these areas big enough for a fingertip and leave space between them. The visible icon can stay small, but the area around it still responds. When targets are generous, people tap correctly the first time.
A concrete example
A banking app receives frequent complaints that users accidentally open the transfer screen when they want to check their balance. A review shows that the two icons in the account card are only 28 points wide and 4 points apart, and they sit near the top of a tall phone, far from the thumb.
The design team enlarges each hit area to 48 by 48 points, adds 12 points of spacing and moves both actions into a row near the bottom of the screen. The icons themselves stay the same size. Mis-tap reports drop noticeably in the following release, and accessibility testing confirms that both controls now meet platform and WCAG target size guidance.