Skip to content
UX Atlas
Plate A11Y·011 · AccessibilityGrid B3 · Rev. 2026-09-14

Target Size

Interactive targets need to be large enough and spaced enough to hit reliably.

AccessibilityCraft conventionFoundational

Definition

WCAG 2.2 introduced 2.5.8 Target Size (Minimum) at level AA, requiring targets of at least 24 by 24 CSS pixels, with exceptions where sufficient spacing exists. The earlier AAA criterion 2.5.5 sets 44 by 44.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Practical rules
  3. 3Sizes by context
  4. 4Making targets reachable
  5. 5Both conform. Only one fits a finger
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Any touch interface.
  • Dense tables and toolbars.
  • Accessibility review.

Common mistakes

  • Icon-sized hit areas.
  • Adjacent targets with no spacing.
  • Density settings that shrink hit areas along with visual spacing.

Practical rules

  • Design to 44 by 44 for touch, even though AA requires 24. Platform guidance from Apple and Google both sit at or above that.
  • The hit area is what counts, not the visible icon. Expand it with padding or a pseudo-element.
  • Spacing can substitute for size under 2.5.8, so a smaller target with a clear gap can conform.
  • Include the label in the target for checkboxes, radios and list rows.
  • Keep destructive targets away from frequently used ones.
  • Inline links in prose are exempt, since enlarging them would disrupt the text.

Sizes by context

ContextWork toWhy
Any touch target44 by 44 CSS pixelsMatches Apple's 44pt and is close to Google's 48dp. WCAG 2.5.8 asks for 24, which is a floor rather than a target.
A dense table on touch44, or one overflow control per rowThree 24 pixel icons in a 32 pixel row is the most common failure of this criterion in product software.
Pointer-only interfaces24 minimum, with spacingSpacing counts under 2.5.8, so a small target with clear separation can conform.
Anything destructiveFull size, and separatedSize and distance from its neighbours are what prevent the mis-tap, not the confirmation afterwards.
Inline links in proseExemptEnlarging them would disturb the line, which the criterion recognises.

Making targets reachable

Do

  • Expand the hit area with padding rather than growing the icon.
  • Include the label in the target for checkboxes, radios and rows.
  • Keep at least the target's own width of space between adjacent small controls.
  • Test on a real phone, one-handed, which finds the reach problems a desktop browser cannot.

Do not

  • Do not put two small targets next to each other where one of them is destructive.
  • Do not rely on a hover affordance to reveal a target that has to be hit on touch.
  • Do not shrink targets to fit more in. Reduce what is shown instead.
  • Do not measure the icon and call it the target. Measure what actually responds to the tap.

Both conform. Only one fits a finger

24 by 24the AA minimumsmaller than a fingertip44 by 44platform guidance, and what to buildcovers the contact areagap24 with spacingthe exception that conforms
The circle is roughly the contact area of a fingertip. The 24 pixel minimum conforms when it has spacing around it, which is the exception rather than the target to design to.

Local chart

A11Y·011 · Region V · Grid B3

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Fitts's LawLAW·002 · WHY THIS WORKSButtonCMP·001 · RELIED ON BYData TableCMP·025 · RELIED ON BYSliderCMP·008 · RELIED ON BYMobile Interaction PatternsPAT·027 · RELIED ON BYChoosing a Density for an Analytics DashboardCASE·004 · PRACTICAL EXAMPLEMobile UX ChecklistCHK·003 · CHECK YOUR WORKAdaptive LayoutFND·044 · RELATED CONCEPTDensityFND·016 · RELATED CONCEPTSpacing SystemsFND·042 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA Data TableA FormA Mobile AppAn Ecommerce ExperienceAn Enterprise Workflow

Why this works

The reasoning this entry rests on.

  • Fitts's LawLAW·002 · Law

    The WCAG minimum is the accessibility floor under an effect that is really about distance and size together.

Relied on by

Entries that assume this is already in place.

Practical example

A worked decision where this was the deciding factor.

Check your work

Review passes that test whether this was done properly.

Related concept

Connected closely enough to change how you apply this.