On a touch screen the cursor is a finger, and a finger is far less precise than a pointer. A 16-pixel icon that is easy to click with a mouse becomes, on a phone, a target to hit carefully, perhaps while walking or holding a bag. Target size is one of the most concrete factors in mobile usability, and also one of the most neglected.
Visible area and active area
We need to distinguish between what you see and what responds to touch. An icon can be drawn at 20 pixels but have an active area of 44 or 48 pixels, thanks to transparent padding. This is the most common way to keep a light look without sacrificing ease of use.
.action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
What the guidelines say
The main recommendations are these:
| Source | Guidance |
|---|---|
| WCAG 2.2, criterion 2.5.8 (level AA) | At least 24 × 24 CSS pixels, or sufficient spacing around smaller targets |
| WCAG, criterion 2.5.5 (level AAA) | At least 44 × 44 CSS pixels |
| Apple guidelines | Minimum area of 44 × 44 points |
| Material Design (Google) | Minimum area of 48 × 48 dp |
The AA requirement is a floor: it rules out the truly problematic cases. Platform values, around 44-48, are a better reference for an app's main controls. The WCAG criterion includes some exceptions, for instance links inside a paragraph of text, where size depends on line height.
Spacing matters as much as size
Two large targets placed right next to each other still cause errors: taps tend to land on the edge and trigger the wrong one. This is the typical case of two neighboring icons such as «Edit» and «Delete», where a mistake has serious consequences. Some good practices:
- leave at least a few pixels of space between adjacent targets;
- separate destructive actions from frequent ones with more space, or place them in different positions;
- in lists, make the whole row active instead of a small link inside it;
- in toolbars, prefer fewer well-spaced actions to many cramped icons.
The thumb zone
Many people use their phone one-handed, tapping with the thumb. In this position the central and lower part of the screen is easy to reach, while the top corners, especially the one opposite the hand, require stretching or changing grip. With ever larger screens, the difference grows.
This leads to some design choices:
- place frequent actions in the lower half, for example in a tab bar or a main button at the bottom;
- avoid putting a form's confirm button only at the top right;
- remember that some users are left-handed: the most important actions work better in the center than in a corner.
It is not an absolute rule: people using their phone with two hands or resting on a table have different needs. But designing for one-handed use rarely penalizes others.
Common mistakes
- Tiny text links in footers, such as «Privacy» and «Terms», crammed onto one line.
- Minuscule close buttons on overlays, sometimes placed near the screen edge.
- Checkboxes and radio buttons of 12-16 pixels, with no clickable label next to them.
- Elements shifting while loading, so that a tap meant for a button lands on a banner that suddenly appeared.
- Gestures as the only way to perform an action: a side swipe to delete an item is fine as a shortcut, but a button must exist too.
The checkbox case has a simple fix: associate the label correctly with the control, so that tapping the text selects the box. The usable area grows without changing the visual design.
Who benefits
Generous targets help people with tremors, arthritis or reduced hand mobility, people with less than perfect eyesight, older people, but also anyone using a phone on a bus, wearing gloves or with one hand busy. It is a clear example of an accessibility requirement improving the experience for everyone.
How to check
The most effective check is to use the product on a real phone, one-handed, perhaps while walking. In addition, browser developer tools let you inspect the actual size of interactive elements, and some automated checking tools flag targets below the minimum threshold.
In short
- The active area can be larger than the visible icon: 44-48 pixels is a good reference for main controls.
- WCAG 2.2 sets a minimum of 24 × 24 CSS pixels at level AA.
- Spacing between targets matters as much as their size.
- Frequent actions belong in the area the thumb can reach.
