Target Size in WCAG 2.2: What Designers and Developers Should Know

Web Content Accessibility Guidelines (WCAG) 2.2 Success Criterion 2.5.8, Target Size (Minimum), is Level AA. A pointer target generally needs to contain an axis-aligned 24 by 24 CSS pixel square. A smaller target can still meet the criterion through sufficient spacing or one of its other defined exceptions.

This rule helps people who have difficulty activating small, closely packed controls with a mouse, touch screen, pen, or other pointer. It concerns the actual area that responds to pointer input, not merely the dimensions of an icon drawn inside it.

The target is the area a person can activate. A 16-pixel icon inside a button with an adequately sized clickable area may satisfy the size requirement even though the artwork itself is smaller. Conversely, adding visual padding that does not respond to input will not enlarge the target.

The W3C explanation says the target must be able to contain a solid, horizontally and vertically aligned 24 by 24 CSS pixel square to meet the size condition. A circular target with a 24-pixel diameter does not contain that square and is therefore assessed as undersized unless an exception applies. Measure the rendered target shape, not only a CSS width declaration.

When a target is undersized, WCAG 2.5.8 permits sufficient spacing. Imagine a circle 24 CSS pixels in diameter centered on the bounding box of that small target. The circle must not intersect any other target or the corresponding circle of another undersized target. This is a test of the actual neighboring layout, not a universal instruction to add 24 pixels of gap.

For example, W3C illustrates 20 by 20 CSS pixel controls with a 4-pixel gap that can pass the spacing test. The same controls with no gap fail in the illustrated layout. If a nearby large target overlaps the imaginary circle, the small target may also fail the exception.

WCAG 2.5.8 has five named exceptions. Document the reason an exception applies instead of treating every undersized control as a violation or exempting an entire component family without examining it.

No. WCAG 2.2 Success Criterion 2.5.5, Target Size (Enhanced), uses a 44 by 44 CSS pixel threshold at Level AAA. It is separate from the Level AA minimum in 2.5.8. Some design systems choose larger targets for important actions because they are easier to activate, but that decision should be described as an aim beyond the AA minimum where appropriate.

A target can also technically meet 2.5.8 through spacing while remaining difficult for some users to activate. Treat conformance as a floor, then evaluate whether critical controls need more generous hit areas.

Icon-only buttons, pagination, table row actions, chart controls, carousel arrows, close controls, calendar dates, and dense toolbars are common places to inspect. Responsive views can introduce new failures when labels wrap, controls collapse into clusters, or margins shrink.

Review all interactive states. A menu or dialog may reveal additional targets with their own size and spacing requirements. Do not assume the desktop layout represents the mobile experience or that increasing browser zoom changes the CSS-pixel rule.

Set a minimum interactive hit area in shared components rather than relying on the icon size. Use padding or another real clickable area around the visible content; confirm that the enlarged area actually activates the intended control and does not overlap a neighbor. Keep enough separation where a target cannot be enlarged.

Document exceptional patterns, such as genuinely inline links or spatial controls, with their reason for being small. Check them in the final interface. A Figma measurement alone does not prove the shipped target matches the design, especially when CSS, text wrapping, and overlays change the clickable geometry.

Choose representative pages and states, then inspect pointer targets at the rendered viewport. Measure the clickable area and surrounding targets. If the target does not contain a 24 by 24 CSS pixel square, evaluate the spacing test or another applicable exception before reporting a failure.

Automated detection can highlight likely small targets, but the final conclusion needs context: clipped shapes, overlays, link text in a sentence, alternate controls on the same page, and responsive states can affect the result. Pair measurement with actual pointer use on the tested device.

A useful finding says more than small icon. It identifies the actual clickable dimensions, the closest neighboring targets, whether an exception was assessed, and the consequence for the task. If the issue affects a shared component, name other likely instances so the team can fix the source and retest a sample.

For example, a compact table row with 18 by 18 CSS pixel edit and delete targets separated by too little space may cause accidental deletion. The report should include the rendered state, measurements, screenshot or geometry evidence, criterion 2.5.8, and a proposed component-level change.

Retest the original target and its neighbors in the published interface. Verify that a larger visual button also has a larger active area, that expanded hit areas do not overlap, and that adjacent controls still perform the correct action. If spacing is the chosen route, repeat the spacing-circle assessment after responsive layout changes.

Keep the before-and-after evidence with the audit record. A CSS change on one page does not close a shared component issue until representative uses and states have been checked.

Does a 16-pixel icon automatically fail? No. Its interactive target may be large enough, or an exception may apply.

Do all text links need 24 by 24 pixels? Links in sentences can meet the inline exception. Standalone navigation links need their own assessment.

Can zoom be used to claim compliance? No. Zoom does not change a target's CSS-pixel dimensions for this criterion.

Is 44 by 44 the WCAG 2.2 AA rule? No. That size is associated with the separate Level AAA Target Size (Enhanced) criterion.

W3C WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

W3C WCAG 2.2 Success Criterion 2.5.5 Target Size (Enhanced): https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html

W3C WCAG 2.2 Recommendation: https://www.w3.org/TR/WCAG22/

Bring a list of shared button, icon, menu, and table-action components; the pages where they appear; and the responsive views most important to users. Include any documented reasons for exceptional compact controls.

IAAP Audit can evaluate target size and spacing in a scoped accessibility audit, document evidence against WCAG 2.5.8, and retest affected journeys after remediation.