Tiny targets are a problem for people with tremors, limited dexterity or just large thumbs on a moving bus. WCAG 2.2 added success criterion 2.5.8 Target Size (Minimum) at Level AA, so it now matters for any policy that points at WCAG 2.2 AA.
The rule
The normative text reads: "The size of the target for pointer inputs is at least 24 by 24 CSS pixels", followed by five exceptions. The exceptions are where most of the practical questions live, so here they are in full:
- Spacing: "Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target."
- Equivalent: "The function can be achieved through a different control on the same page that meets this criterion."
- Inline: "The target is in a sentence or its size is otherwise constrained by the line-height of non-target text."
- User agent control: "The size of the target is determined by the user agent and is not modified by the author."
- Essential: "A particular presentation of the target is essential or is legally required for the information being conveyed."
The spacing test, with numbers
The spacing exception is easier to picture than to read. Draw a circle 24px across, centred on each small target. If no circle touches another target, and no two circles overlap, the small targets pass.
Take a row of 16 by 16 pixel icon buttons. Each circle has a 12px radius, so two neighbouring centres must be at least 24px apart. The icons are 16px wide, which leaves the gap between them at 24 − 16 = 8px or more. At 4px apart, they fail; at 8px, they pass, even though each icon is smaller than 24px.
What the exceptions don't cover
- Links in a paragraph are exempt (Inline). A list of links in a footer or a sidebar isn't a sentence, so it's measured like anything else.
- Default browser checkboxes are exempt only while unstyled (User agent control). Once you restyle them to 14px squares, they are your targets.
- Icon-only buttons in toolbars, carousel dots and "close" crosses on dialogs are the usual failures. A 12px close icon in the corner of a modal is almost always too small and too close to the edge.
Making targets bigger without changing the design
The target is the clickable area, not the visible icon. You can keep a small icon and grow the hit area with padding:
.icon-button {
min-width: 24px;
min-height: 24px;
padding: 4px; /* a 16px icon plus 4px on each side = 24px */
}Or, when padding would push the layout around, enlarge the hit area with a pseudo-element:
.dot { position: relative; width: 10px; height: 10px; }
.dot::after { content: ""; position: absolute; inset: -7px; } /* 24px hit area */Check that enlarged hit areas don't overlap each other, or you swap one problem for another: taps landing on the wrong control.
2.5.8 is the minimum
Level AAA has 2.5.5 Target Size (Enhanced), which asks for 44 by 44 pixels. Platform guidance for touch interfaces also tends to recommend targets well above 24px. Treat 24px as the floor for anything you can't fix today, not as the goal.
How we check it
AccessiSight measures the rendered size of every clickable element and applies the Inline and Spacing exceptions the way the criterion describes them, including the circle test between neighbouring small targets. The Equivalent and Essential exceptions depend on what the page is for, so if a finding is covered by one of them, it's reasonable to dismiss it with a note.
The full reasoning is in the W3C's Understanding 2.5.8 document.