Web Design & UX

Touch Target Size

Quick Definition

Touch target size is the clickable / tappable area of an interactive element — for accessibility and mobile usability, recommended minimum is 48×48 CSS pixels with at least 8 pixels separation from adjacent targets.

In context

Touch targets that are too small (or too close together) cause mistaps on mobile, hurting engagement and conversion. Mobile-first audits should check every CTA, nav link, and form field against the 48×48 minimum. WCAG 2.5.5 specifies a 44×44 minimum for accessibility; Google's mobile usability guidance prefers 48×48. Rounded targets visually feel smaller than square ones but tap as the bounding box — design with that in mind.

Example

A Toronto restaurant's 'Reserve' button on mobile was 32×32 with no padding from the nav — fixing to 48×48 with 12px clearance lifted mobile reservation conversions ~15%.

Have a question this didn't answer?

Book a free 60-minute strategy call. We'll explain how this concept applies to your specific situation.

Book a Free Call Browse 50+ Detailed Answers

Related terms

Above the Fold

Above the fold is the content visible without scrolling when a page loads, named after the front page of a folded newspaper.

Multivariate Testing

Multivariate testing simultaneously tests multiple variations of multiple elements to find the best combination.

PWA (Progressive Web App)

A PWA is a web application that uses modern web capabilities to deliver an app-like experience — installable, offline-capable, push notifications.

Contrast Ratio

Contrast ratio measures the difference in luminance between text and background, expressed as a ratio (e.g., 4.5:1).

Prototype

A prototype is an interactive simulation of a product that shows transitions, interactions, and user flow without being fully built.

Hero Section

The hero section is the large above-the-fold introduction at the top of a page, typically containing the main headline, subheading, primary CTA, and key visual.

Back to all terms