A touch target is the area on screen that responds to a tap. Buttons, links, form fields, and icons all have touch targets. Small or crowded targets frustrate users and cause accidental taps.
Google and Apple both recommend minimum touch target sizes of 48x48 CSS pixels. This is roughly 9mm on screen � approximately the width of an adult finger pad.
Below 48px, users must tap carefully and precisely. Error rates increase significantly. Users trying to tap a 24px link on a mobile screen will frequently miss or hit the wrong target.
Even if targets meet the 48px size, they need adequate spacing. Google recommends at least 8px between targets. Closely packed targets increase the chance of tapping the wrong one, especially when scrolling.
Test your site on mobile by trying to tap the smallest button or link. If you need to aim carefully or zoom in, the touch targets are too small.
Navigation links, menu buttons, form submit buttons, social sharing icons, product list links, and call-to-action buttons are the most common problem areas. Icons-only links (like social media icons) often have the smallest touch targets.
Remember that visually small elements can have a larger touch area using CSS padding and transparent borders. The visual size and the touch target size can differ.
Our free audit covers security, SEO, performance, mobile, design, and content.
Get your free audit