Level AAA

2.5.5 raises the target-size floor to 44x44 CSS pixels at AAA; the AA-level 2.5.8 Target Size (Minimum), added in WCAG 2.2, sets the required bar at 24x24 CSS pixels.

2.5.5 Target Size (Enhanced)

In Plain Language

2.5.5 Target Size (Enhanced) is a Level AAA criterion that requires the pointer target for each interactive control to measure at least 44 by 44 CSS pixels[1]. The target is the hit region, not the glyph: a 16px icon inside a button padded out to 44x44 CSS pixels passes; a 20px icon with no padding does not.

The criterion defines four exceptions. A target may be smaller than 44x44 CSS pixels when an equivalent control that meets the size requirement exists elsewhere on the same page, when the target sits inline in a sentence or block of text (the host line-height governs the hit area), when its size is set by the user agent default and the author has not overridden it, or when the specific presentation is essential to the information being conveyed[1].

2.5.5 is the AAA bar. The required AA floor is 2.5.8 Target Size (Minimum), added in WCAG 2.2, which sets the threshold at 24x24 CSS pixels[2]. Designing to 44x44 clears both in one pass.

Why It Matters

  • Pointer accuracy is a function of tremor amplitude, dexterity, and pointing-device resolution. A user whose hand trembles at a 10-15px radius around an intended point cannot reliably land on a 20x20 target; the same user can land on a 44x44 target because the target envelope exceeds the tremor envelope.
  • The 44 CSS pixel threshold is the figure carried across major platform human-interface guidelines for finger-tip touch, so a site that meets 2.5.5 aligns with the same hit-area assumption native iOS and Android controls already use.
  • Users of alternative pointing hardware -- head pointers, mouth sticks, eye trackers, single-switch scanning -- operate with coarser resolution than a fingertip. Targets sized for the mouse cursor are the first controls these users lose access to.
  • Environmental motion compounds the problem. On transit, in a moving vehicle, or on a phone held one-handed, a non-disabled user's effective pointing precision collapses toward the same range a tremor imposes, so small targets fail for a broader population than the AAA level implies.
  • Dense control clusters cause adjacency errors: even a 44x44 target is mis-hit if the neighbour is 1px away. 2.5.5 is evaluated per target, but the practical fix requires spacing as well as sizing.

Examples

Do: Buttons with adequate target size

Actions:

✔ Each button is at least 44x44 CSS pixels. Easy to tap on mobile and activate with assistive devices.

<!-- Buttons with min 44x44px target size -->
<button style="min-width: 44px; min-height: 44px;
               padding: 10px 16px;">
  Save
</button>
<button style="min-width: 44px; min-height: 44px;
               padding: 10px 16px;">
  Cancel
</button>
Don't: Tiny icon buttons with no padding

Actions:

✘ These 20x20px icon buttons are far too small. Users with motor impairments will struggle to tap the right one.

<!-- BAD: 20x20px icon buttons are too small -->
<button style="width: 20px; height: 20px;
               padding: 0;">
  &#x2716; <!-- close icon -->
</button>
<button style="width: 20px; height: 20px;
               padding: 0;">
  &#x270E; <!-- edit icon -->
</button>
Do: Use padding to enlarge small icons

Icon actions with padding:

✔ Same icons, but padding expands the tappable area to 44x44px. The clickable region is large even though the icon is small.

<!-- Padding expands the target to 44x44px -->
<button style="min-width: 44px; min-height: 44px;
               padding: 12px;
               display: inline-flex;
               align-items: center;
               justify-content: center;">
  &#x2716; <!-- close icon -->
</button>
Don't: Tightly packed controls without spacing

Pagination:

✘ Each pagination link is roughly 22x24px with barely 1px gap. Users will constantly hit the wrong page number.

How to Fix It

  1. Set min-width: 44px and min-height: 44px in your base button, a, and form-control styles. Using min-* rather than fixed width/height lets labels reflow at larger text sizes and satisfies 1.4.12 Text Spacing without clipping.
  2. Pad icon-only controls out to the 44x44 hit area. Keep the glyph at its design size and drive the target with padding plus display: inline-flex and align-items: center; the visible chrome stays compact while the click region meets 2.5.5.
  3. Separate adjacent targets with at least 8px of margin or gap. 2.5.5 is measured per target, but pointer-down events land on whichever target contains the coordinate. Dense pagination, toolbar, or rating-star rows miss users whose landings scatter by a few pixels even when each individual target is 44x44.
  4. Use a larger invisible hit area when the visible control must stay small. A ::before pseudo-element with position: absolute; inset: -12px; extends the activatable region without changing layout. Keep the focus outline on the visible element so 2.4.7 Focus Visible still reads correctly.
  5. Audit computed size, not declared size. Inspect each interactive control in DevTools and read the box-model width and height after layout. Flex shrinking, percentage widths, and overridden line-height frequently push real-world targets below the declared minimum.
  6. Apply the exceptions deliberately. An inline link inside running prose is exempt because its hit area is constrained by the host line-height; a user-agent-default checkbox is exempt until the author restyles it. If a small target exists, verify that an equivalent 44x44 control is present on the same page before claiming the equivalent exception[1].
  7. If AAA conformance is out of reach, meet the WCAG 2.2 AA floor at 24x24 CSS pixels under 2.5.8 Target Size (Minimum). Sites that ship to the required AA bar should still treat 44x44 as the design default and only drop to 24x24 where space forces it[2].

References

  1. [1] W3C (2023). Understanding Success Criterion 2.5.5: Target Size (Enhanced). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html ↩ ↩ ↩
  2. [2] W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2. W3C, Accessed 2026-04-07. https://www.w3.org/TR/WCAG22/ ↩ ↩