How to make tap targets big enough
Links and buttons smaller than 24×24 px are hard to hit on a phone. WCAG 2.2 makes this a requirement.
Step by step, with screenshots: Touch target size: the 24 px WCAG minimum, the 44-48 px guideline and the exceptions →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
Or run only this check with the free Mobile-friendly test + CSP generator.
What it is
Target size is the clickable or tappable area of a link, button or form control. WCAG 2.2 success criterion 2.5.8 (Target Size Minimum, level AA) asks for targets of at least 24 by 24 CSS pixels, or enough space around smaller ones that a 24 px circle centred on each does not overlap another target. Links inside a sentence are exempt.
Small, tightly packed targets cause mis-taps for everyone on a phone and make sites hard to use for people with tremors or limited dexterity: think of tiny pagination numbers, close buttons and footer links. getReport lists tap targets smaller than 24 by 24 px. A page is OK when every target meets that size or spacing; for comfortable tapping, Apple recommends 44 pt, Google 48 dp and WCAG's stricter AAA level 44 by 44 px.
What a passing site looks like
- Tap targets are at least 24×24 pxwarning · −1 ptseffort S
Tap target size
Why it matters. Small links and buttons packed together cause mis-taps on phones, which means abandoned carts and wrong menu choices. WCAG 2.2 asks for at least 24×24 px or equivalent spacing.
- Give links and buttons a minimum height of 24 px (44 px is comfortable) with padding rather than a bigger font.
- Add space between neighbouring targets such as icon rows, pagination links and footer menus.
Questions people ask
What is the minimum touch target size?
WCAG 2.2 sets the minimum at 24 by 24 CSS pixels (criterion 2.5.8, level AA), with exceptions for smaller targets that have enough spacing, links inside sentences and controls whose size the browser sets. That is a floor, not a goal: aim for 44 to 48 px for primary buttons and menu items on mobile.
What does "touch targets do not have sufficient size or spacing" mean?
It is a Lighthouse accessibility finding that some links or buttons are smaller than 24 by 24 px and too close to their neighbours, so a finger is likely to hit the wrong one. Increase the padding around the link rather than the font size, or add space between targets. The finding lists the elements and their sizes.
What touch target size do Apple and Google recommend?
Apple's Human Interface Guidelines recommend at least 44 by 44 points for tappable controls, and Google's Material Design recommends 48 by 48 dp, about 9 mm on screen. On the web a CSS pixel roughly matches a point or dp, so 44 to 48 CSS px is a comfortable target size for mobile layouts.