WCAG 2.5.8 Target Size: What It Requires

WCAG 2.5.8 Target Size (Minimum) is one of the six new WCAG 2.2 criteria that count at Level AA. It says the target for pointer inputs is at least 24 by 24 CSS pixels. That sounds like a single number to check, but the criterion is really two paths to a pass: make the target big enough, or give a small target enough clear space. Knowing both paths saves a lot of needless redesign.

The rule exists for people who cannot hit small, crowded targets cleanly. Hand tremors, reduced fine motor control, and touchscreens with imprecise input all make a 16 pixel icon next to another 16 pixel icon a guessing game. A missed tap opens the wrong page or triggers the wrong action, and the user must backtrack. Size and spacing both reduce that error rate.

Key takeaways

• A pointer target should hold a solid 24 by 24 CSS pixel square inside it.
• A smaller target can still pass if its spacing circle does not touch another target or another small target's circle.
• Five exceptions exist: spacing, equivalent, inline, user agent control, and essential.
• Zoom does not fix a small target, because CSS pixel size stays the same when the user zooms.
• 24 by 24 is a minimum, not a design goal. Larger targets are easier for everyone to hit.

The square test

W3C defines the size test in a concrete way. For a target to be at least 24 by 24 CSS pixels, it must be possible to draw a solid 24 by 24 CSS pixel square, aligned to the horizontal and vertical axis, completely inside the target. A target that is 40 pixels wide but only 16 pixels tall fails the square test, because no 24 pixel square fits inside a 16 pixel height. A skewed or rounded target passes if a 24 pixel square still fits somewhere inside it, even though the shape itself is not square.

That detail catches the most common failure: wide, short buttons. A text button with generous side padding but tight vertical padding looks roomy and still fails. Check height first. Add vertical padding until the height reaches 24 CSS pixels, or until the spacing exception below applies.

Measure in CSS pixels, not device pixels. On a high resolution phone screen, one CSS pixel may cover several physical pixels. Browser developer tools report the CSS size, so use them rather than guessing from how the button looks.

The spacing exception, worked through

When a target is smaller than 24 by 24 CSS pixels, it is called undersized. An undersized target can still pass under the spacing exception. Draw an imaginary circle 24 CSS pixels in diameter, centered on the target's bounding box. If that circle does not intersect another target, and does not intersect the circle of another undersized target, the spacing passes.

W3C gives a clear illustration. A row of 20 by 20 pixel icon buttons with 4 CSS pixels of space between them passes, because the 24 pixel circles around them do not intersect. The same row with no space between the buttons fails, because the circles overlap. A single row of buttons 16 pixels tall with no targets above or below passes, because there is nothing nearby for the circles to touch. Stack two such rows with only 1 CSS pixel between them and both rows fail.

In practice, this means you have two levers, not one. You can grow the target, or you can push its neighbors away. Padding inside the target grows it. Margin or gap outside the target creates spacing. Either lever works, as long as the final geometry passes one of the two tests.

The five exceptions

Spacing is the first exception. The other four are narrower, and each has a specific shape.

Equivalent: the function can be achieved through a different control on the same page that meets the criterion. A tiny "zoom preview" icon overlapping a large product image can pass this way, because the large image link itself does the same job at full size. The equivalent control must be on the same page and must genuinely offer the same function.

Inline: the target is in a sentence, or its size is otherwise constrained by the line height of non-target text. Links inside a paragraph are the classic case. Text reflows as viewports change, so authors cannot predict where inline links will sit relative to each other. Setting a readable line height matters more here than forcing each inline link to 24 pixels tall.

User agent control: the size of the target is determined by the user agent and is not modified by the author. Browser drawn parts, such as the calendar grid inside a date input, fall here, as long as the author has not resized them. The moment you restyle that control's size, you own the size again.

Essential: a particular presentation of the target is essential, or is legally required, for the information being conveyed. Map pins are the W3C example: pins must sit at their true locations, so dense pins cannot always be spaced apart. Interactive data visualizations with necessarily dense targets are similar. When this exception applies, W3C strongly encourages providing equivalent functionality another way where practical.

Where small targets hide

Footer social icon rows are the usual suspect. A row of 16 pixel icons with no gap fails both the size test and the spacing test. Fix it by growing each icon button to 24 by 24 CSS pixels, which usually means adding padding rather than redrawing the icon, or by adding gap between the buttons until the spacing circles clear each other.

Dropdown menu items are next. A menu whose items are only 18 pixels tall fails when the items are stacked with no gap, because each item's circle touches the next. Padding each item to 24 pixels tall fixes it and also makes the menu easier to read.

Pagination, carousel dots, star ratings, and close buttons on cards all deserve the same check. Any control smaller than a fingertip and sitting next to another control is worth measuring. Do not rely on zoom to rescue them: W3C is explicit that the requirement is independent of zoom factor, because CSS pixel size does not change when the user zooms.

A quick check you can run

Open a page in a browser, open developer tools, and hover over each small control in turn. Read its CSS size from the box model. If both dimensions reach 24 CSS pixels, it passes the size test. If not, look at its neighbors. If no other target sits within 24 pixels of its center in any direction, the spacing exception likely covers it. If a neighbor is close, grow the target or add gap, then recheck.

Run that check on mobile widths too. Targets that pass on a wide desktop layout can crowd together when the layout collapses, especially icon rows and navigation menus that wrap.

How Axeazy helps with this exact issue

Target size is reported for a human to resolve, because the right fix depends on the design of each control. A scan can flag undersized or crowded targets in your code, and the capabilities page states that scope plainly. Read how the scan works to see how findings are recorded with a date and time.

For the wider WCAG 2.2 picture, read the WCAG 2.2 vs 2.1 guide, which lists all nine new criteria, and the pinch to zoom guide, which covers the zoom rules that sit beside target size. The HTML lang attribute guide covers another rule that still applies in 2.2.

Want a quick read on your own site? Run Axeazy's free 60 second scan . It needs no signup.

Last checked: October 30, 2026.

FAQ

Is 24 by 24 CSS pixels the same as 24 pixels on my phone screen?

No. CSS pixels are an abstract unit. On a high resolution screen, one CSS pixel can cover several physical pixels. Check the CSS size in browser developer tools, not the physical size on screen.

Does zooming to 200 percent fix a small target?

No. W3C states the requirement is independent of zoom factor, because CSS pixel size does not change when the user zooms. A target that fails at 100 percent zoom fails at 200 percent too.

Can a target smaller than 24 by 24 pixels ever pass?

Yes, under the spacing exception, if its 24 pixel diameter circle touches no other target and no other undersized target's circle. It can also pass under the equivalent, inline, user agent control, or essential exceptions where those genuinely apply.

Should I aim higher than 24 by 24?

Yes, for important controls. W3C notes that larger targets help many people use targets more easily, and points to the stricter 2.5.5 Target Size (Enhanced) as a goal for important links and controls. 24 by 24 is the floor, not the ideal.

Sources

• W3C Understanding Success Criterion 2.5.8: Target Size (Minimum), checked October 30, 2026
• W3C Understanding Success Criterion 4.1.2: Name, Role, Value, checked October 30, 2026
• Axeazy capabilities, checked October 30, 2026
• Axeazy methodology, checked October 30, 2026