Target size is how big a clickable or tappable thing is, and two WCAG rules govern it at two different numbers. Level AA asks for 24 by 24 CSS pixels, with a spacing route out for anything smaller. Level AAA asks for 44 by 44 and gives you no spacing route at all, which is where the familiar 44 actually comes from. The platform vendors then publish their own figures, and they do not agree with the standard or with each other. Apple's guidance says 44 points and Google's says 48dp, and neither of those is what a WCAG audit measures you against. One more thing that catches people. A small target on its own does not fail the AA rule. Small targets packed together do, which is why icon rows, close buttons, table row actions and pagination are where this bites.
In practice
The spacing route has two conditions and almost every description gives one. Draw a circle 24 CSS pixels across, centered on the bounding box of each undersized target. That circle must not intersect another target, and it must not intersect the circle of another undersized target. Touching exactly is not intersecting, which is why W3C's own worked example passes 20 pixel squares set 4 pixels apart. Two 4 by 4 pixel targets sitting 16 pixels apart pass the first test easily, because the nearest edge is 18 pixels from either center. They fail the second, because the centers are 20 apart and the circles overlap. Both targets fail.
The size test is whether a 24 by 24 square fits entirely inside the target, which is where rounded corners bite. A button measured at exactly 24 by 24 with rounded corners does not have room for that square, so it is undersized, and every design system ships rounded buttons.
There are five exceptions and spacing is only the first. The function is also available through a different control on the same page that meets the criterion, by any of its routes rather than by size alone. The target sits inside a sentence, or its height is set by the line height of text around it. The browser sizes it and you have not changed that size, which is what a restyled scrollbar usually gives away. Or the presentation is essential, or legally required, which is the exception a jurisdiction insisting an online form replicate a paper one falls under.
Zoom does not rescue anything here. Zooming does not change the CSS pixel size of an element, so a small target is exactly as small at 400% as it was at 100%. You cannot answer a finding by telling somebody to zoom in.
Why it matters
The people W3C names are specific. Hand tremors, spasticity and quadriplegia among the disabilities. Alongside them, anyone in a shaking environment such as public transport, anyone with large fingers or operating a device with a knuckle, and anyone using a phone one-handed. Which is a wide group, and it is not everybody, because bigger is not universally better. People with visual field loss may want a more condensed layout with smaller controls so more fits into the field they have, while others with low vision want large ones. Density is a trade-off rather than a straight line, and the rule sets a floor rather than a target.
Measuring it
Level AA asks for 24 by 24 CSS pixels, and both numbers count. A menu row 24 pixels tall has cleared the height and still has to be 24 wide, which a full-width row is and a narrow icon at the end of it is not. A row 18 tall fails on size and can still pass if nothing else sits within reach of it. Level AAA asks for 44 by 44 and offers no spacing route at all, so an icon that passed AA on spacing alone needs one of AAA's own exceptions instead, such as the same function offered by a bigger control elsewhere on the page.
Where this shows up on the site
Related terms
- Motor disabilityMotor disability covers anything that affects movement, strength, precision or sensation, from tremor and arthritis to multiple sclerosis, repetitive strain, paralysis and missing limbs.
- Switch deviceA switch device is an input for people with severely limited movement, and the picture most people have is a single large button pressed with a hand, head or knee.
- ReflowReflow is content rearranging itself to fit a narrow viewport instead of making you scroll sideways to read every line.
- OperableOperable is the second WCAG principle, and its one-line statement is that user interface components and navigation must be operable.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.