On this page
- 01Key takeaways
- 02What is a tap target?
- 03How big should buttons be on mobile?
- 04How much space should sit between targets?
- 05How do you find targets that are too small?
- 06What does it cost to fix tap targets?
- 07When can targets be smaller?
- 08What does this look like in practice?
- 09Tap target checklist
- 10Next step
- 11Sources and further reading
- 12Frequently asked questions
Key takeaways
Tap target size is the area a visitor can touch to activate a button or link. On a phone it should be about 48 pixels square, with a small gap to the next target. Smaller than that and people hit the wrong thing, or miss altogether, and the cost shows up as abandoned menus, forms and calls.
- 48px is the size Google's web.dev guidance recommends for touch targets, about 9mm.
- Leave around 8px between neighbouring targets so a finger cannot hit two.
- WCAG 2.2 sets a minimum of 24 by 24 CSS pixels at level AA.
- The tappable area can be larger than the visible icon or text.
Want the undersized buttons on your site listed? Send us the URL on WhatsApp.
Chat on WhatsApp →What is a tap target?
A tap target is any element a visitor touches to make something happen: a button, a text link, a menu icon, a form field, a checkbox or the cross that closes a pop-up. Its size is the touchable area, which can be bigger than what is drawn on screen.
Tap targets matter on phones because a fingertip is a blunt instrument. A mouse pointer is one pixel wide. Nielsen Norman Group cites MIT Touch Lab research putting the average fingertip at 1.6 to 2 centimetres across, with the thumb's contact area wider still. A link designed for a pointer is too small for a thumb.
How big should buttons be on mobile?
Buttons on mobile should be about 48 pixels in height and width. Google's web.dev guidance recommends a minimum touch target of around 48 device-independent pixels on a site with a properly set viewport, which is roughly 9 millimetres. Nielsen Norman Group recommends at least 1 centimetre by 1 centimetre. The two agree closely.
The Web Content Accessibility Guidelines (WCAG) version 2.2 sets a lower floor. Success criterion 2.5.8, at level AA, requires targets of at least 24 by 24 CSS pixels, with exceptions for inline links and for small targets that have enough space around them. Treat 24px as the minimum you must not go below and 48px as the size to design for.
- Primary buttons: 48px high or more, full width on narrow screens.
- Icons such as menu, search and close: 48px touch area, even if the icon is 24px.
- Form fields: at least 48px high, with the label above.
- Text links in a list: enough line height and padding to reach 48px per row.
How much space should sit between targets?
Leave about 8 pixels between touch targets, horizontally and vertically. That is the web.dev recommendation, and its purpose is to stop a finger pressing one target from also touching its neighbour. Two 48px buttons with no gap are harder to use than two with a small gap.
Spacing is where most business sites fail. Footer links stacked tightly, a row of social icons, a phone number sitting directly above an email address and breadcrumb links are the usual offenders. Each is easy to click with a mouse and awkward with a thumb.
How do you find targets that are too small?
Start with your thumb. Open the site on a phone and try every control once, at normal speed, holding the phone in one hand. Anything you miss, or hit by mistake, is too small or too close to something else. Then confirm with tools.
- Tap every menu item, footer link and icon with a thumb and note the misses.
- Run Lighthouse in mobile mode and read the accessibility section for target size.
- In Chrome DevTools, inspect a control to see its real width and height.
- Check the close buttons on pop-ups, banners and chat widgets.
- Test with the on-screen keyboard open, when space is tightest.
- Google's Mobile-Friendly Test has gone: how to test now
- The mobile readiness scorecard: score your site in an hour
Prefer a second pair of thumbs? Message us on WhatsApp and we will test every control on your key pages.
Chat on WhatsApp →What does it cost to fix tap targets?
Usually very little. Enlarging buttons, adding padding to links and spacing out footer items are stylesheet changes, often a few hours of work within an indicative £500 to £3,000 for wider mobile fixes on an existing site. No content or structure needs to change.
The exception is a design that depends on dense controls, such as a large mega-menu or a data-heavy table with many small links. There the fix is a redesign of that component for phones, not a larger font. Even so, it is far cheaper than leaving a menu that a third of visitors mis-tap.
When can targets be smaller?
Links inside a sentence can be smaller, because enlarging them would break the paragraph. WCAG exempts inline targets for that reason. Keep such links few, and do not place two side by side. Controls drawn by the browser itself, such as a native date picker, are also outside your control.
The trade-off with large targets is space. A screen can only hold so many 48px rows. That is a useful constraint, not a problem: if the controls do not fit, there are too many of them. Cut the choices before you shrink the buttons.
What does this look like in practice?
A pattern we see across small business sites: the header has a 20px menu icon in one corner and a 20px phone icon beside it. Both are the two most important controls on the page, and both are smaller than a fingertip. Visitors trying to call open the menu, and visitors trying to open the menu start a call.
Giving each icon a 48px touch area and moving them apart takes minutes. Global Bridge Labs (GBL) checks header and footer controls first in any mobile review, because they appear on every page and so does the frustration.
Tap target checklist
- Make primary buttons at least 48px high.
- Give icons a 48px touch area regardless of their drawn size.
- Leave about 8px between neighbouring targets.
- Add padding to footer and list links so each row is tappable.
- Enlarge the close button on every pop-up and banner.
- Set form fields to at least 48px high.
- Re-test with a thumb after each change.
Next step
Hold your phone in one hand and try to use your own menu, footer and contact button. Every mis-tap is one your customers are making too.
Message us on WhatsApp for a tap target review of your header, menu, forms and footer.
Chat on WhatsApp →Sources and further reading
- Accessible tap targets · web.dev (Google)
- Understanding SC 2.5.8: Target Size (Minimum) · W3C Web Accessibility Initiative
- Touch targets on touchscreens · Nielsen Norman Group
- Introduction to Lighthouse · Chrome for Developers
Frequently asked questions
What is the minimum tap target size?
WCAG 2.2 success criterion 2.5.8 sets a minimum of 24 by 24 CSS pixels at level AA, with some exceptions. Google's web.dev guidance recommends about 48 pixels, roughly 9 millimetres, with around 8 pixels between targets. Design for 48 and never go below 24.
How big should a button be on a mobile website?
Aim for at least 48 pixels high, and full width or close to it for the main action on a narrow screen. That gives a thumb a comfortable target. Nielsen Norman Group's research-based recommendation is a physical size of at least 1 centimetre by 1 centimetre.
Does the icon itself have to be 48 pixels?
No. The visible icon can be smaller, such as 24 pixels, as long as the touchable area around it is about 48 pixels. Developers do this by adding padding to the control, so the design stays neat while the target is large enough for a finger.
How do I check tap target sizes on my website?
Test on a real phone with a thumb first and note every mis-tap. Then run Lighthouse in mobile mode, which reports targets that are too small in its accessibility checks, and use Chrome DevTools to inspect the actual dimensions of any control.
Written by
Global Bridge Labs (GBL) is a UK–Sri Lanka partner for social media, websites and BPO. Everything here comes from client delivery, not theory.
