Touch Target Sizes for Mobile Websites

A touch target is the area of the screen that responds when someone taps a link, button, or form control. If it is too small or too close to other targets, people tap the wrong thing or have to try repeatedly. This frustrates everyone and can make a site unusable for people with limited dexterity or tremors.

What size is big enough?

Different standards give different numbers:

• WCAG 2.2 Level AA requires a minimum target size of 24 by 24 CSS pixels, with some exceptions, such as when enough spacing surrounds smaller targets, or when the link sits within a sentence.
• WCAG Level AAA and many platform guidelines recommend larger targets, around 44 by 44 CSS pixels. Apple's design guidelines suggest about 44 points, and Google's Material Design suggests about 48 density-independent pixels.

For primary actions on a mobile site, aim for at least 44 pixels in height and width. Treat 24 pixels as an absolute floor, not a goal.

Spacing matters too

Even large buttons are hard to hit when tightly packed. Leave comfortable gaps between adjacent targets, around 8 pixels or more is a common minimum, so one tap does not trigger the wrong item. Navigation lists, footers, and stacked links are common trouble spots. See navigation best practices and footer best practices.

Make the whole area tappable

The clickable area can be larger than the visible element. Add padding to links and buttons rather than relying on tiny text. For a card containing a title and a link, consider making the whole card clickable, carefully, so assistive technologies still get meaningful link text.

Be careful with inline links

Links within paragraphs are exempt from the WCAG minimum, but dense runs of links still cause trouble. Break up long lists of links with spacing, and increase line height. See readable text.

Think about thumb reach

On large phones, the top corners are hard to reach one-handed. Place frequently used actions, like call or book buttons, in easy-to-reach areas, and consider sticky bars for key actions on mobile.

Pay attention to icons and close buttons

Tiny "x" icons on pop-ups, small social icons, and compact controls are frequent offenders. Give them generous hit areas. Better still, avoid intrusive pop-ups altogether.

Do not rely on hover

Hover does not exist on touch screens. Anything triggered by hover must also work by tap or focus. See keyboard navigation and focus.

How to test

Use your own thumbs on a real phone and ask others to try. Look for missed taps. Browser developer tools and some audits can flag targets that are too small. Our mobile-friendly checklist includes touch checks.

Support forms and calls to action

Make form fields and submit buttons easy to tap. See accessible forms and calls to action.

The bottom line

Make primary tap targets about 44 pixels, never below 24, and give them breathing room. Easy tapping is a small detail that makes a big difference on mobile.