Touch targets

A touch target is the tappable area of a button, link or control. WCAG 2.2 asks for at least 24 by 24 CSS pixels, and Apple recommends 44 by 44 points.

Why it matters

Fingers are less precise than cursors. Small targets cause mis-taps and frustration, especially for older users and people with motor impairments.

In practice

  • Design for 44 pixels.
  • Add space between neighbouring targets.
  • Make the whole card tappable, not just the link text.

The UI sizing guideAll 42 terms

Related terms

Mobile-first design

Mobile-first design starts with the phone screen and adds to it for larger screens, instead of squeezing a desktop page down.

Learn the term

Nested border radius

The nested border-radius rule says an inner corner's radius should equal the outer radius minus the padding between them.

Learn the term

Spacing scale

A spacing scale is a short list of allowed gaps, built from one base value such as 4 or 8 pixels.

Learn the term

Want this done for you?

Touch targets is part of a normal project here. Tell me where you are and I'll suggest the first three fixes.

Book a 20-minute call