Tap sizes

What the rulebooks say

Three well-known guides give three numbers, and they agree more than it looks.

The accessibility rules, WCAG 2.2, set the lowest limit. Anything you can tap should be at least 24 by 24 pixels. Smaller things only pass if they have enough empty space around them, or if a bigger button on the same page does the same job, or if they are links inside a sentence.

Apple suggests 44 by 44 points as the normal size for controls on the iPhone and iPad, with 28 by 28 as the absolute minimum. It also advises about 12 points of space around buttons that have a visible shape, and about 24 points around those that don’t.

Google’s advice for Android phones is at least 48 by 48 dp, which is about 9 millimetres on the screen, with at least 8 dp of space between them.

So 24 pixels is the bare minimum to pass the rules. For anything people tap often on a phone, aim for 44 to 48.

Space counts too

The accessibility rules have a neat way to check small targets. Imagine a circle 24 pixels wide drawn over the middle of each small button. If the circles don’t touch any other button, or each other, the small buttons still pass. In plain words, small icons are fine as long as there is enough room between them.

That is why a row of five tiny icons pressed right up against each other fails, while the same icons with a little gap between them can pass.

Make the tap area bigger, not the picture

Usually you don’t need to make the icon itself bigger. You can add invisible padding around it, so the area that reacts to a tap grows to 44 pixels while the icon stays the same size.

The same idea works elsewhere. In a list, the whole row can react to a tap, not only the words. With tick boxes, tapping the words next to the box should also tick it. Developers do this by putting the box inside its label. That one change helps a lot of people.

The usual trouble spots

The little cross that closes a pop-up or a cookie notice is a classic. It is often tiny and tucked into a corner, sometimes right next to another button. Make it 44 pixels and give it space.

Page numbers at the bottom of a list are another one. Rows of small numbers with almost no gap between them are very hard to hit. On a phone, “Previous” and “Next” buttons with “Page 3 of 12” in between are often easier.

Long lists of small links at the bottom of a page, and plus and minus buttons for choosing a quantity, are worth checking too. So are buttons right at the edge of a phone screen, where it is easy to swipe the phone itself by mistake.

How to check

Developers can switch on outlines in the browser tools and look at the real size of each clickable area, not just the icon. But the best test is simple. Hold your phone in one hand and use your thumb to go through the page. If you hit the wrong thing twice, your visitors will too.