Mobile / touch · M.5

Minimum touch target

A light switch you can find in the dark.

A 44px floor on anything a thumb has to hit, with the spacing rule that lets a smaller control still pass and the in-sentence exemption that lets a link in a paragraph off.

JavaScript is off, so the controls are hidden and the stage below shows a static field instead of the running effect. Every word on this page is still here. Nothing is hidden behind the script.

4 knobs

How it actually works

Every rule here is about the box, and every failure here is a box that was never given one. A 15px brand dot, a 30px nav link, a 23px overlay button, an 18px range input: each looked deliberate on a mouse and each was a coin flip under a thumb. The one that is worth internalising is the range input, because a slider is not a tap, it is a drag, and a 15px handle on an 18px rail has to be caught while it is moving.

The hit area is the element's box, not the ink inside it, so the fix is almost always padding or a min-height rather than a bigger glyph. Two published floors and one exemption: WCAG 2.5.5 Target Size (Enhanced, AAA) asks for 44 by 44 CSS px; WCAG 2.5.8 Target Size (Minimum, AA) allows 24 by 24 provided a 24px circle centred on the target does not intersect the circle of any neighbour, which makes SPACING a legitimate substitute for size; and both exempt a target that is inline in a sentence or block of text, because enlarging it would wreck the line box it lives in. A native checkbox is the awkward case: it ignores padding, so a 44px hit area cannot be bolted onto one.

The knobs, named

Target size, spacing, the hit-area overlay, and the in-sentence exemption. Size and spacing are sourced: 44px is named by WCAG 2.5.5 and by the Apple Human Interface Guidelines, and the 24px spacing allowance is named by WCAG 2.5.8. The overlay is ours.

Knob	Source	What it teaches
Target size	sourced	44 is the WCAG 2.5.5 and Apple HIG number. Drag below it and the overlay turns red; drag below 24 and even the spacing allowance cannot save it.
Spacing	sourced	WCAG 2.5.8 lets a target under 24px pass if a 24px circle around it touches no neighbour. Spacing is a real substitute for size, and it is the one that fits a dense toolbar.
Hit-area overlay	ours	Draws the 44px floor as a dashed box behind each control, plus the 24px spacing circles. The mark inside each button never changes size, so what you are watching is the box move away from the standard.
In-sentence exemption	sourced	Both success criteria exempt a link inline in a sentence. On, the paragraph link is marked exempt; off, it is flagged like everything else, which is what a naive checker does and why naive checkers get ignored.

sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.

Evidence

VERIFIED (author) + VERIFIED (ours, shipped)

The numbers are published: WCAG 2.1 SC 2.5.5 Target Size (Enhanced, AAA) states 44 by 44 CSS pixels with an exception for a target inline in a sentence or block of text; WCAG 2.2 SC 2.5.8 Target Size (Minimum, AA) states 24 by 24 with the spacing alternative; the Apple Human Interface Guidelines state 44pt. Ours, shipped and measured 2026-07-21: clients/tabblabs/build/qdeneanpeace/styles.css carries min-height: 44px on its inline actions and on .brand, and this playground's own assets/play.css carries the mobile block that took its header link from 15x15, its section nav from 30px tall and its range inputs from 18px tall up to the floor. The failures named in the narrative are our own measurements of our own pages, not an anecdote.

Seen on: WCAG 2.1 / 2.2 and the Apple HIG for the numbers; our own qdeneanpeace build and this playground for the failures and the fixes.
Dependencies: vanilla CSS
Difficulty: easy, and skipped anyway because a mouse never notices
Performance: None.
Accessibility and the floor: It is an accessibility criterion rather than a technique with an accessibility note. Worth stating plainly: the spacing alternative is a real pass, not a loophole, and the in-sentence exemption exists so that meeting the rule does not force you to wreck a paragraph. Nothing animates.

Where our build departs from the source: A headless browser and a desktop pointer both hit a 20px target perfectly, so this page cannot demonstrate the failure by making you miss. It shows you the geometry instead: the real hit box, the 24px spacing circles, and a pass or fail against each criterion by name. The judgement about whether a 24px target with generous spacing is good enough for YOUR audience is not something the geometry can settle.

Notes

Composability. It is the acceptance test for every other control on this site, including this page's own knobs. The thumb-zone bar (M.1) exists to put a target in reach; this is the rule for how big that target has to be once it is there.

Grow the box, not the glyph. min-height plus a flex centre keeps the label the size it was and makes the target the size it needs to be, which is why almost none of these fixes are visible. The two exceptions are worth knowing: a native checkbox ignores padding entirely, so its hit area has to be built by making the input itself 44px and drawing the box you see inside it; and a range input needs the track height AND the thumb to grow, because on a drag the thumb is the target.

Reflow instead of clip

End of the catalog

Back to all features