How big should a touch target be?

At least 48 × 48 dp on Android (Material Design) and 44 × 44 points on Apple platforms. WCAG 2.2 requires at least 24 × 24 CSS pixels at level AA.

Does the icon itself have to be 48 px?

No. The icon can stay at 24 px while padding around it brings the tappable area to 48 px.

What is Fitts’s law?

A model published by the psychologist Paul Fitts in 1954: the time it takes to reach something grows as it gets smaller and further away.

Back to Blog

Design tip13 October 20264 min read

Make buttons finger-sized

Why design guidelines ask for touch targets of at least 48 px, and how to get there without making every icon bigger.

$Cover for “Make buttons\nfinger-sized”: A phone with a tiny button marked wrong and a blue button 48 high marked right, with a fingertip reaching for it.$

You try to tap the tiny “close” button in the corner of an ad, and open the ad instead. Or you pick the wrong date in a cramped calendar. The problem isn’t your hand. It’s the size of the target.

A finger, not a pointer

The first graphical interfaces were designed for the mouse, and a mouse pointer is precise to a single pixel. A finger is wide, it covers what it presses, and often it’s a thumb doing the work while the other hand holds a coffee.

That is why the major design guidelines agree on a minimum touch target:

Google’s Material Design recommends at least 48 × 48 dp, about 9 mm on screen whatever the device.
Apple’s guidelines recommend at least 44 × 44 points.
WCAG 2.2 requires at least 24 × 24 CSS pixels at level AA, and 44 × 44 at the stricter AAA level.

Why size matters

Fitts’s law, published by the psychologist Paul Fitts in 1954, describes how the time it takes to reach a target grows as the target gets smaller and further away. A small target means slower taps and more mistakes, and every mistake is an extra tap, a step back, or a user who leaves.

How to get there without making everything bigger

The touch target is not the size of the icon. The icon can stay at 24 px while the tappable area around it reaches 48 px through padding.

Give every tappable button and icon an area of at least 48 × 48 (dp on Android, CSS pixels on the web).
Leave space between neighbouring targets; Material Design recommends at least 8 dp.
Put the most-used actions where the thumb reaches easily.