Target Size (Enhanced)
Pointer targets need to measure at least 44 by 44 CSS pixels, against 24 by 24 at Level AA. Four exceptions come with it. A target also available as a full-size control elsewhere on the page. A target inside a sentence or a block of text. A target whose size the browser sets and you have not changed. And a target where a particular presentation is essential to what it conveys. Note the word pointer. A mouse and a pen are pointer inputs too, so this is not only a phone rule.
Why it matters
Twenty-four pixels is a floor. Forty-four is roughly a fingertip, which is why Apple has recommended exactly that figure in its platform guidelines for years, and why Google's Android guidance asks for more still at 48dp. The reason touch is the hard case is not only precision. Your finger covers the thing you are aiming at, so you cannot see what you are about to hit until after you have hit it.
Who this rule protects
People with tremor or reduced dexterity, people with large fingers or tapping with a knuckle, anybody using a phone one-handed, and anybody tapping on a moving bus. W3C names low vision too, since a bigger target is easier to see as well as to hit.
How to check it yourself
- Measure the smallest tappable targets on the page, especially icon-only ones.
- Check pagination controls, table row actions and close buttons, which is where this bites hardest.
- Check whether any small target overlaps its neighbor, since the shared area counts for neither of them.
- Ask whether the same function is available full-size somewhere else on the page, because that satisfies the rule on its own.
- Go bigger than 44 where the control gets used constantly, sits near a screen edge, or does something the reader cannot easily undo.
Failures we see most often
- A toolbar packs a row of 24px icon buttons with no room between them.
- Pagination numbers carry no padding around the visible digit.
- A close button is sized to its glyph rather than to a fingertip.
- Two small controls overlap, so each measures smaller than it looks.
Who this one is for
Read from this rule's own note above, so the grouping and the note cannot disagree.
- Low visionpeople who can see the screen but not easily
- Motor and keyboard-onlypeople who cannot use a mouse, or cannot use one precisely
How to fix it
- Set a minimum hit area of 44 by 44 with padding, rather than growing the icon itself. Google's own guidance shows the same pattern, a 24dp icon inside a 48dp target.
- Space adjacent targets apart so a near miss does not land on the neighbor.
- Where a cramped toolbar genuinely cannot grow, offer the same function full-size somewhere else on the page and take the equivalent-control exception.
Step-by-step fix guides (1)
Passes vs. fails
Passes
The same icon keeps its drawn size and gains padding that takes the hit area to 44 by 44.
Fails
A 20px close icon sits in the corner of a modal with no padding around it.
In audits and lawsuits
This is Level AAA and the AAA criterion most worth adopting on anything used on a phone. The one numbered technique W3C publishes for it is about pagination, which tells you where it bites. Two details save arguments. Overlapping hit areas count toward neither target's size unless both do the same thing, so crowding controls together shrinks them twice over. And the inline exception is narrower than it sounds. A link that is a whole sentence is only exempt when that sentence sits inside a block of text, though a footnote marker or an icon at the end of a sentence counts as part of the sentence.