Reviewed November 2, 2026

Touch Targets on Product Grids: The 24 Pixel Floor and the 44 Pixel Reality

WCAG 2.2 Success Criterion 2.5.8 Target Size Minimum, Level AA, requires targets of at least 24 by 24 CSS pixels, with exceptions for spacing, inline text links, and cases where a duplicate control exists. That is a floor written to pass audits, not a usability target. Apple and Google design guidance both sit at 44 to 48 pixels. On product grids, where swatches, wishlist hearts, and quick add buttons crowd together, build primary actions at 44 pixels and treat 24 as the legal minimum for secondary controls with clear spacing.

The mis-tap is a measurable conversion problem wearing an accessibility costume. A shopper aiming for a color swatch opens the wishlist. Aiming for quick view, they hit quick add. Nobody files a bug report about it; they just leave, and the analytics record a bounce with no explanation. Target size is the rare fix that pays both the auditor and the revenue line, which is why arguing about the minimum is the wrong argument.

The standard itself deserves a careful read, because its exceptions are where grids quietly fail audits while looking compliant in a screenshot.

Reading 2.5.8 without fooling yourself

The criterion allows a spacing exception: undersized targets pass if a 24 pixel circle centered on each target's bounding box does not overlap another target or its circle. Dense grids abuse this on paper. Swatches at 20 pixels with tight gutters can be argued compliant circle by circle, while a real thumb, covering roughly 40 pixels of screen, covers three of them at once. Passing the letter of AA and failing the shopper is a documented outcome, not a paradox.

Note what is exempt and what is not. Links inside a paragraph of text are exempt; your product title links are not sitting inside a sentence, so do not borrow that exemption. Pagination and duplicate controls have their own carve outs. The wishlist heart, the swatch, and the quick add button on a card are plain targets and should be sized like it.

A sizing scheme that survives real thumbs

Make the entire product card's image and title one generous link target rather than three small competing ones. Give quick add a full width bar at the card's base, at least 44 pixels tall; it converts better and it is unmissable. Swatches: render the visual dot at whatever size looks right, but expand the clickable area to at least 36 to 44 pixels with transparent padding, and keep 8 pixels minimum between adjacent hit areas so a centered tap cannot straddle two colors.

The wishlist heart is the repeat offender. A 16 pixel icon in a card corner with a 16 pixel hit area fails the floor outright unless the spacing exception is honestly met. Give it a 44 pixel corner zone, visually quiet, functionally obvious. Then verify with a device in your hand at arm's length on a moving train, because that is the actual usage environment your grid was designed in an office for.

Checking your theme in an afternoon

Measure hit areas in the browser inspector, not visual sizes: select the element and read its box, since padding is what your thumb experiences. Audit the grid, the filter facets, the size selector on the product page, the quantity stepper, and the cart drawer controls; small steppers with minus and plus at 20 pixels are the other fleet wide offender.

Log mis-tap proxies while you are at it: quick add followed within seconds by cart removal, swatch changes immediately reversed, wishlist toggles doubled. Those sequences in your analytics are target size complaints filed in the only language shoppers use.

Frequently asked questions

What is the minimum touch target size for WCAG 2.2 AA?

Success Criterion 2.5.8 requires at least 24 by 24 CSS pixels, or a spacing arrangement where 24 pixel circles on each target do not overlap other targets. It is a minimum, not a recommendation. Designing primary actions to 44 pixels remains the safer usability choice.

Do color swatches on product cards count as targets under 2.5.8?

Yes. Each swatch is a distinct control and is not covered by the inline link exception. You can keep the visible dot small, but the clickable area should reach at least 24 pixels with proper spacing, and ideally 36 to 44 pixels for a control people use with a thumb.

Why do Apple and Google say 44 to 48 pixels if WCAG says 24?

They are answering a different question. WCAG sets a legal accessibility floor across all interfaces; the platform guidelines target comfortable one handed use and low error rates. Meeting the floor keeps you compliant. Meeting the platform sizes keeps shoppers from mis-tapping.

Does making the whole product card clickable cause accessibility problems?

It can if nested interactive elements, buttons inside a link, are structured badly. Build the card with one main link for image and title and keep quick add and wishlist as separate sibling controls, not nested inside the anchor. That structure is both valid and keyboard friendly.