Tap target size guide: making buttons easy to press on phones

A mouse pointer is a single pixel. A fingertip covers a patch of screen many times larger and nobody can see exactly where it lands. That difference is why buttons that feel perfectly usable on a laptop become fiddly on a phone. Getting tap target size right is one of the most measurable parts of mobile design: there are published minimums, simple ways to check them, and clear layout habits that keep a site easy to operate with one thumb.

What counts as a tap target

A tap target is any area a person can press to make something happen. That includes obvious buttons, but also menu links, icons, form checkboxes, radio buttons, pagination numbers, social icons, carousel arrows, the close button on a popup and the text links inside paragraphs.

The important point is that the target is the tappable area, not just the visible shape. A small icon can have a generous invisible hit area around it thanks to padding, while a large-looking button might only respond to taps on its text if it was coded badly.

Recommended minimum sizes, compared

Several respected sources publish guidance. They differ slightly because they measure in different units and aim at different levels of strictness, but they point in the same direction.

• WCAG 2.2, Target Size (Minimum), level AA: targets should be at least 24 by 24 CSS pixels, or have enough spacing that a 24px circle centred on each does not overlap another target. There are exceptions, for example links within a sentence.
• WCAG 2.2, Target Size (Enhanced), level AAA: at least 44 by 44 CSS pixels.
• Apple Human Interface Guidelines: a minimum hit area of 44 by 44 points for controls.
• Google Material Design: touch targets of at least 48 by 48 density-independent pixels, which works out to roughly 9mm on screen.

A practical approach for business websites is to treat 24px as the legal-style floor and aim for 44 to 48 pixels for anything people press often, especially primary buttons, menu items and form controls.

Spacing between targets matters as much as size

Two 48px buttons pressed right up against each other can still cause mis-taps, because a finger that lands on the border has a fair chance of hitting the wrong one. Spacing gives a margin for error.

Material Design suggests at least 8 pixels of separation between touch targets. The consequences also matter: if the neighbouring targets are "Save" and "Delete", leave more space, or separate them visually into different areas.

Where cramped targets usually appear

• Rows of social media icons in headers and footers
• Pagination links such as 1, 2, 3, 4 in a tight row
• Stacked footer links with small line height
• Quantity plus and minus buttons in shopping carts
• Star-rating inputs in review forms

Thumb zones: placing targets where fingers reach

Many people use their phone one-handed, pressing with the thumb. On today's tall screens, the bottom and middle of the display are easy to reach, while the top corners, especially the one opposite the holding hand, require a stretch or a second hand.

This does not mean everything should sit at the bottom. It means the most frequent and important actions deserve the easiest positions:

1. Consider a sticky bottom bar on mobile for a primary action such as "Call", "WhatsApp" or "Add to cart".
2. Keep form submit buttons directly below the last field, not tucked in a corner.
3. Place less frequent actions, such as account settings or language switchers, in harder-to-reach areas.
4. Make primary buttons full width on small screens so they can be reached by either hand.

Increasing tap size without changing the design

Owners sometimes resist larger targets because they worry the design will look clumsy. Usually it does not need to.

Padding instead of bigger visuals

Adding padding to a link or icon button enlarges the clickable area while the visible icon stays the same size. A 20px icon inside a button with 14px of padding on each side gives a 48px target.

Making the whole card clickable

On product or article cards, the entire card can act as the link rather than only the small title text. This must be done carefully so that screen readers do not announce a huge link and any secondary buttons inside the card still work.

Taller list rows

For menus and footer links, increasing line height and vertical padding on each link gives more space to tap without altering font size.

How to check tap targets with Lighthouse and by hand

Lighthouse, available in the Chrome DevTools Lighthouse panel and through PageSpeed Insights, can flag touch targets that are too small or too close together. In recent versions this appears under the Accessibility category; older versions showed a similar audit under SEO. The exact audit wording varies between versions, so read the listed elements rather than relying on the score alone.

Automated checks miss context, so add a manual pass:

• In DevTools, inspect a small element and look at the box model to see its real clickable size including padding.
• On a real phone, try pressing every item in your header, menu, footer and forms with your thumb, one-handed.
• Ask someone with larger hands, or an older relative, to complete a task on your site while you watch for missed taps.

Setting a tap target standard for your site

Write a short rule into your style guide: primary controls at least 48px tall, all other interactive elements at least 24px with 8px spacing, and main actions within easy thumb reach on mobile. Then apply it to your shared components such as buttons, form fields and menus, so every new page follows it automatically.

If you are planning a redesign, include this standard in the brief. Our website development service builds touch-friendly components by default, and you can ask an expert to review a specific page.

Frequently asked questions

What is the minimum button size for mobile?

WCAG 2.2 AA sets a floor of 24 by 24 CSS pixels with some exceptions. For comfortable use, Apple recommends 44 points and Google Material Design recommends 48 density-independent pixels, which are good targets for main buttons.

Do text links inside paragraphs need to be 48 pixels?

No. Inline links within a sentence are exempt from the WCAG minimum size requirement. Still, avoid placing several short links right next to each other, and give paragraph text a comfortable line height.

Are CSS pixels the same as screen pixels?

No. Phones have high-density screens, so one CSS pixel may equal two or three physical pixels. Size guidance for websites refers to CSS pixels, which is what you set in your stylesheet.