How big a thing has to be to hit

Visual size and target size are two different numbers

A close button may be a 16-pixel cross. Its target — the region that responds to a tap — should be about 44 pixels square. These are separate decisions, and treating them as one is the commonest cause of an interface that feels fiddly on a phone.

The numbers, from the platform guidance and the accessibility standard:

• iOS: 44 by 44 points minimum.
• Android / Material: 48 by 48 density-independent pixels.
• WCAG 2.2, success criterion 2.5.8 Target Size (Minimum), level AA: 24 by 24 CSS pixels, with exceptions where spacing compensates, where the target is inline in a sentence, or where the presentation is essential.
• WCAG 2.1, criterion 2.5.5 Target Size, level AAA: 44 by 44 CSS pixels.

The AA floor of 24 is lower than either platform's guidance, which surprises people. It is a floor for conformance, not a recommendation. Design to 44 or 48 and you satisfy everything.

A fingertip's contact patch is roughly 8 to 10 millimetres, and the point a person believes they are touching is typically a few millimetres above the centre of the contact patch. That is where these numbers come from: 44 points is about 9mm on a typical phone.

Fitts's law, and what it actually says

The time to reach a target is proportional to the logarithm of the distance divided by the target's width:

time ≈ a + b · log2( 2D / W )

The useful consequence is the shape of that relationship, not the constants. Because both distance and width sit inside a logarithm, doubling the width buys the same improvement as halving the distance. Width is usually far cheaper to change than distance, which is why enlarging a target is the first move and rearranging a layout is the second.

A second consequence, on desktop only: the pointer stops at the edge of the screen, so a target against the edge is effectively infinitely wide in that direction, and a corner is infinite in two. This is why the macOS menu bar at the very top and the Windows Start button in the corner are fast to hit, and why a toolbar placed one pixel away from the screen edge throws that advantage away. On touch, the effect does not apply — there is no pointer to stop — and edges are actively worse because of the operating system's own swipe gestures.

Spacing matters as much as size

Two 48px targets with no gap between them are not safe. The error case is not missing the target, it is hitting the wrong one, and the consequence of hitting Delete instead of Archive is much worse than the consequence of missing both.

A working minimum is 8 pixels of clear space between adjacent targets, and more where the actions differ in consequence. Put destructive actions somewhere other than beside their most common neighbour, and give them a confirmation if the gap cannot be made.

WCAG 2.2's spacing exception formalises this: a target smaller than 24px can still conform if a 24px circle centred on it does not overlap the circle of any adjacent target.

Implementing a large target on a small mark

You do not have to make the icon bigger. Three free approaches:

/* 1. Padding on the interactive element */
.icon-button { padding: 14px; }   /* 16px icon + 28px = 44px */

/* 2. A pseudo-element that extends the hit area */
.small-link { position: relative; }
.small-link::after {
  content: ''; position: absolute; inset: -12px;
}

/* 3. Minimum size, letting the icon centre itself */
.icon-button { min-width: 44px; min-height: 44px;
  display: inline-grid; place-items: center; }

The first is usually the right one, because padding is part of the object, which is the rule from the previous lesson.

Testing it honestly

A mouse on a desktop will hit anything. The bug is invisible until somebody uses a thumb while walking. Two checks that cost nothing:

• Open the page on an actual phone and use it one-handed, while standing up, not while sitting at your desk holding it with both hands.
• In browser developer tools, device emulation shows layout but not accuracy. It will not find this class of fault, and believing it does is how the fault ships.

The counter-argument

Larger is not automatically better. Fitts's law describes the cost of hitting a target, and it applies just as well to targets you do not want hit. A giant delete button is a hazard, and an interface where every control is 60 pixels tall pushes real content off the screen and forces scrolling that costs more than the taps it saved.

The rule that resolves it: size targets in proportion to how often they are used and how recoverable they are. Frequent and safe gets large and close. Rare and destructive gets small, far away, and confirmed.