Design Principle
Interactive targets need enough size and spacing, especially on mobile, toolbars, and dense lists.
Principle
Interactive targets need enough size and spacing, especially on mobile, toolbars, and dense lists.
Design action
Default touch targets to roughly 44px or equivalent padding; dense desktop controls still need clear hover/focus and spacing.
Examples
Positive example: Icon buttons, table row actions, mobile bottom bars, and dense filters need low mis-tap risk. Counterexample: A 16px icon has no extra hit area.
Apply when
Icon buttons, table row actions, mobile bottom bars, and dense filters need low mis-tap risk. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems. WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/
Agent Directive
Default touch targets to roughly 44px or equivalent padding; dense desktop controls still need clear hover/focus and spacing.