WCAG 2.2 · 2.5.8 Target Size (Minimum) · 2.5.5 Target Size (Enhanced)
Touch target check
Enter the size of a button or icon and the space between them. You see a row of them at real size, and whether they are big enough to tap.
This tool needs JavaScript. Without it, the rule of thumb: make every tap target at least 24 by 24 pixels, and 44 by 44 where you can.
Real size
Magnified 3×
At real size, one CSS pixel here is one CSS pixel on your site. The dashed circles are the 24 px circles from WCAG 2.5.8; when they overlap a neighbour, the targets are too close.
- AA · 2.5.8 Target Size (Minimum): 24 × 24, or enough space around it24 px
- AAA · 2.5.5 Target Size (Enhanced)44 px
- Apple guideline (44 pt) · Google Material (48 dp)44–48
Why size matters
A target that is too small is hard to hit for people with a tremor, Parkinson's disease, arthritis or limited hand control. But it is just as annoying for anyone tapping with a thumb on a moving tram, holding a coffee, or wearing gloves. A missed tap is at best a second try, at worst the wrong action: deleting instead of editing.
Fitts's law, from 1954, puts it simply: the smaller and further away a target is, the longer it takes to hit, and the more often you miss.
What WCAG says
- 2.5.8 Target Size (Minimum), level AA, new in WCAG 2.2: a target is at least 24 by 24 CSS pixels. A smaller target is allowed if there is enough space: draw a circle of 24 px around its centre, and it must not touch another target or that target's circle.
- 2.5.5 Target Size (Enhanced), level AAA: at least 44 by 44 CSS pixels, without exceptions for spacing.
- Exceptions: links inside a sentence, targets whose size the browser sets (such as a default checkbox), and cases where the small size is essential, such as pins on a map.
Apple asks for 44 points and Google for 48 density-independent pixels. On the web both are close to 44 to 48 CSS pixels. If you can, design for that, and treat 24 as the absolute minimum.
A tip for small icons
The icon can stay small; the target does not have to. Give the button padding, or a pseudo-element that extends the clickable area, so a 16 px icon sits in a 44 px button. It looks the same and is far easier to hit.
.icon-button { padding: 14px; } /* 16 px icon + 2 × 14 px = 44 px */