UI Tip #001Forms & components

Make touch targets at least 44×44pt

Fingers are blunt. Give anything tappable a hit area of at least 44×44pt, even when the icon inside it is smaller. Pad the target, not the glyph.

Why it matters

A fingertip covers far more of the screen than a mouse pointer does, and people tap on the move, with one thumb, without looking closely. When the hit area is only as big as the icon, taps land just outside it. People either tap again or hit the button next to it, and both feel like the app is broken.

How to do it

Make every tap target at least 44×44pt on iOS (Apple’s guideline) or 48×48dp on Android (Material’s).

Keep the icon at its natural size, often 20–24pt, and grow the hit area around it with padding, or with a pseudo-element on the web:

.icon-button {
  position: relative;
}
.icon-button::after {
  content: "";
  position: absolute;
  inset: -10px; /* a 24px icon becomes a 44px target */
}

Leave room between neighbours, so two hit areas don’t overlap and steal each other’s taps.
Check the small things: close buttons, checkboxes, the links in a footer, the arrows in a date picker.

When it bends

WCAG 2.2 sets the floor at 24×24 CSS pixels (2.5.8, level AA), with 44×44 as the stronger target (2.5.5, AAA). Links inside a sentence are exempt, and a dense desktop tool used with a mouse can go smaller than 44. On touch, treat 44 as the minimum.

Sources