Touch Targets

Touch Target Size Guidelines

Overview

Our design system uses two distinct touch target scales to optimize usability across different interface elements while maintaining AA accessibility compliance. This dual-scale approach follows industry best practices and ensures both functional effectiveness and visual clarity.

Touch Target Classes

Button Touch Targets

Sizes: 42px, 44px, 48px Use for: Primary actions, navigation elements, standalone interactive elements

Form Control Touch Targets

Sizes: 24px, 32px, 44px Use for: Checkboxes, radio buttons, switches, toggle controls

WCAG AA Compliance

Both touch target classes meet WCAG 2.1 AA accessibility standards through different approaches:

Button Touch Targets (42-48px)

• Compliance: Direct compliance through size

• All sizes meet or exceed the 44px minimum recommendation

• Provides generous touch area for reliable interaction

• Suitable for all device types and user abilities

Form Control Touch Targets (24-44px)

• 24px size compliance: Meets AA standards when surrounded by adequate spacing

• 32px+ sizes: Direct compliance through size

• Spacing requirement: 24px controls require minimum 10px clear space on all sides to achieve effective 44px touch target

When to Use Each Class

Use Button Touch Targets When:

• Element is a primary call-to-action

• Button appears in isolation or navigation contexts

• Element needs strong visual presence

• User expects button-like interaction patterns

Use Form Control Touch Targets When:

• Element is part of a form or data collection

• Multiple controls appear in close proximity

• Visual hierarchy should emphasize content over controls

• Maintaining form layout density is important

Size Selection Guidelines

Button Sizes

• 42px: Secondary actions, compact layouts

• 44px: Standard buttons, most common use case

• 48px: Primary actions, mobile-first designs, hero CTAs

Form Control Sizes

• 24px: Dense forms, desktop-focused interfaces (ensure adequate spacing)

• 32px: Standard forms, balanced layouts

• 44px: Mobile-first forms, accessibility-focused designs, isolated controls

Implementation Notes

Spacing Requirements

• 24px controls: Minimum 10px clear space on all sides

• Larger controls: Follow standard component spacing guidelines

• Ensure touch targets don't overlap or create interaction conflicts

Visual vs. Touch Area

Remember that the visual size and touch target size can differ:

• Form controls may have smaller visual indicators within larger touch areas

• Use CSS padding or invisible hit areas to achieve minimum 44px touch targets

• Test with actual users to ensure touch targets feel natural and responsive

Responsive Considerations

• Consider increasing touch target sizes on smaller screens

• Mobile-first designs should default to larger sizes (44px+)

• Desktop interfaces can use smaller visual sizes with adequate spacing

Accessibility Testing

Validation Checklist

• All touch targets meet 44px minimum (including spacing)

• Controls are easily distinguishable from surrounding content

• Touch targets don't overlap or create accidental activation

• Controls remain usable across different input methods (touch, mouse, keyboard)

• Visual focus indicators are clearly visible and properly sized

Testing Tools

• Use browser developer tools to visualize touch target areas

• Test with screen readers and keyboard navigation

• Conduct usability testing with users who have motor impairments

• Verify compliance with automated accessibility checkers