The 24-Pixel Rule Has Five Exceptions. Learn Them Before You Remediate.

A wishlist heart 14 pixels wide. A cart line-item remove button that is a bare multiplication sign. Quantity stepper buttons with no padding around the glyph. Carousel dots the size of pinheads. These are the controls that fail WCAG 2.5.8, the Level AA target-size rule WCAG 2.2 added, and they are also the controls most teams either never measure or fix by making everything enormous. Both reactions are wrong, and the five exceptions are the reason.

The rule

The criterion text is one sentence. The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where one of five exceptions applies. Measurement is by the full interactive bounding box, not the visible icon: a 16-pixel icon inside a 44-pixel button passes comfortably, because the target is the button. The understanding document is specific about how size is measured: it must be conceptually possible to draw a solid 24 by 24 CSS pixel square, aligned to the axes, completely within the target. CSS pixels, not physical pixels, so the rule holds on high-DPI screens without any conversion.

The famous 44 by 44 number is a different criterion. That is 2.5.5 Target Size Enhanced, Level AAA, from WCAG 2.1. The practical rule most teams settle on is build to 44 by 44 for primary actions and test against 24 by 24 for AA. The 24-pixel floor is the legal minimum. It is not the target to design for.

The five exceptions, ranked by how often they save you

Spacing does most of the work. A target smaller than 24 by 24 still passes if a 24-pixel circle centered on it does not touch any other target or another target's circle. A row of small icons can pass without growing any of them, as long as there is enough space between them. This is the exception most often misread: it is about the gap between targets, not the size of the target itself, and it has to hold against every nearby target, not just the nearest one.

Inline exempts links inside a sentence, where the line height of the surrounding text sets the size. Padding every inline link to 24 pixels tall would break the text flow entirely, and the criterion knows it. Equivalent saves a tiny inline icon when the same function is available elsewhere on the same page through a target that meets the minimum. User agent control exempts native controls the browser renders itself, an unstyled checkbox or a native select, but style it yourself and the exception is gone. Essential covers a presentation that is legally required or genuinely necessary to the function, which is rare in practice. A map control where clickable points must stay small to represent geography is the usual example.

The measurement mistake

Automated testing for 2.5.8 is still limited. Most scanners, including axe, Lighthouse, and WAVE, do not reliably test target size, because the criterion needs layout-aware measurement of computed element sizes and gaps. That means the rule gets missed by the same CI gates that catch everything else, and it gets found by a person with a ruler. Measure the real offenders on your own storefront: the remove button on cart line items, the quantity steppers, the swatch chips, the carousel dots, the close button on the cookie banner. If the clickable area is exactly the size of the glyph, with no padding around it, it fails. Add padding, not pixels to the icon: the fix is a bigger hit area, not a bigger picture. For the focus side of the same audit, see what 2.4.13 demands of your outline, and for the contrast side, the 3 to 1 rule for icons and focus indicators.

Frequently asked questions

Is the target the icon or the whole button?

The whole button. Size is measured by the full interactive bounding box. A 16-pixel icon inside a 44-pixel button passes, because the target is 44 pixels. A 16-pixel icon with no padding fails, because the target is 16 pixels.

Does the spacing exception mean small buttons are fine?

Only when the gap is big enough. A target under 24 by 24 passes if a 24-pixel circle centered on it touches no other target. Crowded rows of small icons do not pass, and the gap has to hold against every nearby target.

Do inline text links need to be 24 pixels tall?

No. The inline exception covers links inside a sentence and targets whose size is constrained by the line height of surrounding text. Padding every inline link to 24 pixels would break the text flow, and the criterion exempts exactly that case.

Why do scanners not catch target size failures?

Because the criterion needs layout-aware measurement of computed sizes and gaps, which is technically complex for automated tools. Axe, Lighthouse, and WAVE do not reliably test it. It has to be measured by a person, or by a dedicated layout-aware tool.