Touch target size: the minimums, the comfortable sizes and the spacing
WCAG 2.2 sets a floor of 24 by 24 CSS pixels for pointer targets at level AA, with an exception for small targets that have enough space around them. The enhanced level asks for 44 by 44, and Android's guidance recommends 48dp. For a website, treat 24px as the legal floor and around 44px as the size to design to for anything people tap often.
The numbers, side by side
| Source | Size | Status |
|---|---|---|
| WCAG 2.2, 2.5.8 Target Size (Minimum) | 24 × 24 CSS px, or enough spacing | Level AA: the usual legal and contractual bar |
| WCAG 2.2, 2.5.5 Target Size (Enhanced) | 44 × 44 CSS px | Level AAA: recommended, rarely required |
| Android accessibility guidance | 48 × 48 dp | Recommended for touch interfaces |
A CSS pixel isn't a device pixel. On a phone with a dense screen, 44 CSS pixels is roughly the width of a fingertip pad, which is why the larger numbers keep turning up. The size counts the whole clickable area, not the visible icon: a 16px chevron inside a 44px button is a 44px target.
How the 24px rule and its spacing exception work
The W3C's explanation of Target Size (Minimum) gives a practical test. Imagine a 24px circle centred on each target that's smaller than 24 by 24. If none of those circles overlaps another target or another small target's circle, the page passes even though the targets are small. In other words, small controls are acceptable when they're spread out; small controls packed together are not.
There are four exceptions: when another control on the page does the same thing and is large enough; inline links inside a sentence, whose size is set by the line of text; controls whose size the browser sets and the author hasn't changed; and cases where the size is essential or legally required. The enhanced criterion at 44px carries similar exceptions.
Where small targets hide on real sites
- Social icons in the footer, often 16 to 20px with 8px between them.
- Close buttons on banners and dialogs, drawn as a small × in a corner.
- Carousel dots and pagination numbers.
- Text links in navigation whose clickable area is only the text's own height.
- Checkboxes and radio buttons styled smaller than the browser default, with the label not wired to the input.
- Time slots and date pickers, where a dense grid makes neighbours easy to hit by mistake.
Making a control bigger without making it look bigger
- Pad the element, not the icon. Give buttons and nav links
min-height: 44pxanddisplay: inline-flex; align-items: centerso the text sits in the middle of a taller hit area. - Use the label. Wrap a checkbox in its
label, or link them withfor, so the whole line of text becomes the target. - Extend with a pseudo-element. For a small icon button, an absolutely positioned
::beforewith a negative inset enlarges the hit area while the icon stays small. Check it doesn't overlap a neighbour. - Space small things apart. If footer icons must stay small, put at least 24px between their centres, or better, make each a 44px square with the icon inside.
- Make whole cards clickable only when the card has one destination; a card with three links inside needs three proper targets.
Button size for mobile isn't only about fingers. People with tremors, people using a head pointer and anyone on a moving bus benefit from the same room. On desktop the rule still applies to mouse targets, though precise pointers make the larger sizes less pressing. See button design for websites for the visual side, and the thumb zone for where on the screen those targets should go.
Testing target sizes
Browser developer tools show an element's box when you hover it in the inspector, which is the quickest way to measure. Then test with your hands: use the site one-handed on a small phone, with your thumb, and note every time you hit the wrong thing. Automated checkers can flag some undersized targets, but they can't judge whether two targets are confusingly close in a busy layout.
Target size in Anticode
Anticode's design systems size controls for touch. In pages from the design engine, header links, the logo link, text links and the buy links on product cards are given a minimum height of 44px, buttons and form fields 46px, and booking time slots and FAQ questions at least 44px tall. App builds, which the model writes as a whole program, are opened at phone and laptop widths and clicked through in a headless browser during self-review when that service is available, so a control that can't be reached shows up before you see the build.
Questions people ask
Is 44px or 48px the right size?
Either is comfortable. 44 CSS pixels matches WCAG's enhanced level; 48dp is Android's recommendation. Both sit well above the 24px AA minimum.
Do inline links in a paragraph need to be 24px tall?
No. WCAG exempts links within a sentence, because their size is set by the line of text. Generous line height still helps.
Does target size matter on desktop?
The WCAG criterion applies to any pointer, mouse included. In practice the pressure is highest on touch screens.