Touch target check

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 24px 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 16px icon sits in a 44px button. It looks the same and is far easier to hit.

.icon-button { padding: 14px; } /* 16px icon + 2 × 14px = 44px */