Touch Target Size

Touch target size determines how easy interactive elements are to activate through touch or pointer input. Adequate target sizes prevent accidental activation and enable users with motor impairments to interact accurately.

What Is Touch Target Size

Touch target size refers to the interactive area of buttons, links, form controls, and other tappable elements. The visual size may differ from the touch target size, which can extend beyond visible boundaries through padding or other techniques.

WCAG addresses touch targets through multiple criteria:

• 2.5.5 (Target Size) at Level AAA: 44x44 CSS pixels minimum
• 2.5.8 (Target Size Minimum) at Level AA in WCAG 2.2: 24x24 CSS pixels minimum with spacing requirements

Users with motor impairments, tremors, or limited dexterity need larger targets. Small targets cause frustration and errors for many users, particularly on touch devices.

How Touch Target Size Works

Minimum target dimensions ensure adequate space for activation. WCAG 2.2 Level AA requires either:

• Target is at least 24x24 CSS pixels, OR
• Target has sufficient spacing from other targets (spacing plus target size totals 24px), OR
• Target is in a sentence or block of text (inline links), OR
• Target size is determined by the user agent (native controls), OR
• Target size is essential to the information being conveyed

The 44x44 pixel recommendation (Level AAA) provides more comfortable interaction. Apple Human Interface Guidelines recommend 44pt minimum; Material Design recommends 48dp. These guidelines align with or exceed WCAG AAA.

CSS implementation often uses padding to increase touch target size while maintaining visual design:

This creates a 44x44 pixel touch target around smaller visual content.

Spacing between targets also matters. Adjacent small targets create error-prone interfaces. Sufficient gaps reduce accidental activation of wrong targets.

Key Considerations

• Design minimum 44x44 pixel touch targets for primary interactive elements
• Meet WCAG 2.2 minimum of 24x24 pixels for all interactive elements
• Use padding to increase touch targets beyond visual boundaries
• Ensure adequate spacing between adjacent targets
• Test on actual touch devices with various users
• Consider thumb reach zones for mobile interfaces
• Document minimum target sizes in design system specifications

Common Questions

How do inline links meet target size requirements?

Inline links within paragraphs are exempted from strict size requirements in WCAG 2.5.8 because applying minimum sizes would disrupt text layout. However, adequate line height helps users activate inline links.

For important links, consider making them block-level or adding padding. Links that must be inline benefit from generous surrounding space.

Should touch targets be larger on mobile?

Mobile devices are primarily touch-operated, making target size especially important. Fingers are less precise than cursors. Mobile design systems often specify larger minimums (48px) than desktop.

Responsive design might increase target sizes at mobile breakpoints or maintain consistent large targets across breakpoints.

How do icon buttons meet target size requirements?

Icon buttons often display small visual icons (16-24px) but need larger touch targets. Padding around the icon creates the necessary target size:

The visual icon is 24px; the touch target is 44x44 due to 10px padding on all sides.

Summary

Touch target size requirements ensure interactive elements can be activated accurately. WCAG 2.2 requires minimum 24x24 pixel targets at Level AA; 44x44 pixels meets Level AAA and industry best practices. Design systems specify minimum sizes and use padding to create adequate targets around smaller visual elements.