Reviewed November 4, 2026

Target Size Minimum on a Storefront: The 24 Pixel Rule in Practice

WCAG 2.2 Success Criterion 2.5.8, Target Size (Minimum), Level AA, requires pointer targets of at least 24 by 24 CSS pixels, unless a 24 pixel circle around an undersized target does not overlap another target, or an exception applies such as inline text links. The older 44 pixel figure is the Level AAA criterion 2.5.5, a good design target but not the AA floor.

Your product grid passes an automated scan and still frustrates every thumb that uses it. The quick view icons are 16 pixels. The quantity stepper buttons are 18. The pagination numbers sit shoulder to shoulder. None of that trips the common checkers, and all of it is exactly what WCAG 2.2 added a criterion to catch.

Criterion 2.5.8 is one of the nine new criteria in WCAG 2.2, published as a W3C Recommendation in October 2023. It is also widely misunderstood, because two different numbers circulate with the same phrase target size attached.

24 is the floor, 44 is the aspiration

At Level AA, 2.5.8 asks for 24 by 24 CSS pixels. At Level AAA, 2.5.5 asks for 44 by 44. Platform guidance sits in the same upper range, which is why designers quote 44 or 48 and auditors cite 24, and both believe the other is wrong.

For a storefront, treat 24 as the legalistic floor you must clear and 44 as the size you design to wherever space allows. Add to cart, checkout steps, and filter controls should live near the AAA number. A dense size selector can clear AA at 24 with honest spacing and still be usable.

The spacing exception does real work

An undersized target can still pass if a 24 pixel diameter circle centered on it does not intersect another target or its circle. That is the spacing offset route, and it rescues things like star rating inputs and compact social icons when they are given air.

It does not rescue a row of 20 pixel swatches packed edge to edge, because every circle overlaps its neighbor. When you test, test the row as it ships at a real mobile breakpoint, not the desktop layout where everything has room. Most storefront failures are breakpoint specific, born in the compressed mobile header and the sticky bar.

How to audit without guessing

Measure with browser DevTools at the device sizes your analytics actually report. Check the header icons, the mobile menu rows, quantity controls on cart, swatch and size selectors, pagination, footer link columns, and the close button on every modal and drawer, which is chronically undersized.

Automated tools are weak here; layout aware measurement is required and most scanners do not reliably test 2.5.8. Keep a simple spreadsheet of control, measured size, spacing result, and fix. That record is also what a serious remediation conversation with counsel or an auditor will ask for.

Frequently asked questions

What is the minimum target size in WCAG 2.2?

Success Criterion 2.5.8 requires at least 24 by 24 CSS pixels at Level AA, with exceptions including sufficient spacing around a smaller target, inline links in text, and user agent controls. The 44 pixel requirement is Level AAA criterion 2.5.5.

Do inline text links have to be 24 pixels tall?

No. Targets within a sentence or block of text are excepted, since their size is constrained by line height. The criterion is aimed at standalone controls like buttons, icons, and menu items.

Does a small icon pass if it has padding around it?

It can. If the combined target area including spacing keeps a 24 pixel circle clear of neighboring targets, the spacing exception applies. Padding that is itself clickable is the cleanest way to reach the full 24 pixels.

Which storefront controls fail target size most often?

Quantity steppers, icon buttons in the header, color swatches, pagination, and modal close buttons are the usual failures, especially in mobile layouts where the design compresses everything.