Touch targets and thumb reach on a small screen

WCAG 2.2 sets a specific, numeric minimum for interactive elements on a touchscreen: 24 by 24 CSS pixels, with defined exceptions. A button smaller than that is measurably harder to hit accurately with a real thumb. So is one crowded too tightly against its neighbours. A thumb is a different and less precise instrument than the mouse pointer used to test most sites during development.

The WCAG target size standard, stated precisely

WCAG 2.2’s Target Size (Minimum) success criterion (2.5.8, Level AA) requires the size of a target for pointer inputs to be at least 24 by 24 CSS pixels, with specific exceptions including inline text links within a block of text, and cases where the same function is available through an equivalent target elsewhere that does meet the size requirement. A separate, higher bar — Target Size (Enhanced), 2.5.5, Level AAA — sets a larger 44 by 44 pixel target, which is not required for AA conformance but represents better practice where it can be achieved without other trade-offs.

Why a numeric minimum touch target size exists at all

A touchscreen has no cursor to precisely indicate a single pixel the way a mouse does. A thumb presses an area of the screen. The device then estimates which element was intended, based on where the touch was centred. Below a certain physical size, that estimation becomes unreliable. This is particularly true for anyone with reduced fine motor control. The WCAG minimum exists to keep interactive elements above the size where mis-taps become common for a broad range of users, not only those with a diagnosed motor impairment.

Meeting the minimum size does not guarantee meeting the spacing intent

A button can be exactly 24 by 24 pixels and still be difficult to use reliably. This happens if it sits directly adjacent to another equally sized target with no spacing between them. The standard’s size requirement does not, on its own, guarantee adequate separation. In practice, though, adequate spacing is usually necessary to meet the intent behind the criterion, rather than merely its letter. Two small buttons touching each other, both individually meeting the minimum, still produce a real mis-tap risk in practice.

Thumb reach — the usability layer above the accessibility minimum for touch targets

Beyond the accessibility minimum, where a control sits on the screen changes how reliably it can be reached one-handed. Most phones are held and operated with one thumb for a large share of real-world use. The thumb’s natural, comfortable reach covers roughly the lower-to-middle portion of the screen more easily than the very top corners. This is a usability consideration layered on top of, not a replacement for, the WCAG minimum size requirement. A primary call-to-action button positioned within comfortable one-handed thumb reach, near the bottom or middle of the screen, is generally easier to use reliably than an equally-sized button tucked into a top corner. That holds true even though both may equally satisfy the accessibility standard.

How to actually measure a rendered target’s size in CSS pixels

Confirming a control meets the 24-pixel minimum is a direct, checkable measurement, not a guess. A browser’s built-in developer tools let the rendered size of any element be inspected directly. They show its actual width and height in CSS pixels as displayed. That removes any ambiguity about whether a specific button or link genuinely clears the standard. A circular icon button is measured the same way as a rectangular one. The standard cares about the touchable area, not the shape. Padding added around a visually small icon is the most common, least disruptive way to bring an undersized control up to the minimum, without changing how large it looks. This is a five-minute check worth running on a site’s primary buttons and links, rather than assuming a design that looks adequately sized actually measures as such.

Fixed navigation controls and target spacing sit directly in the thumb-reach zone, for better or worse

A bottom-anchored navigation bar, or a persistent call-to-action button fixed to the bottom of the screen, sits exactly within the zone most phones’ thumbs reach most comfortably. That is precisely why this pattern is common for a primary action. But it also means a poorly spaced fixed bottom bar crowds several targets into the one part of the screen already receiving the most touch traffic. That makes adequate spacing between those specific targets more important than for controls elsewhere on the page.

Reach is not identical for every user, and designing for the broad middle is the safer default

Thumb reach differs slightly depending on which hand is holding the phone and which thumb is operating it. A design optimised narrowly for one specific reach pattern can be less comfortable for a user holding the device differently. The safer general approach is positioning primary actions within the broadly reachable lower-to-middle zone. That works reasonably regardless of which hand a visitor is using, rather than assuming a single specific reach pattern applies to every visitor.

A short, checkable list of target sizes and spacing

Check	Standard or consideration
Every interactive element is at least 24 by 24 CSS pixels	WCAG 2.2 Success Criterion 2.5.8 (AA)
Adjacent small targets have adequate spacing between them	Intent of 2.5.8, tested practically with a real thumb
Primary calls to action sit within comfortable one-handed reach	Usability practice, not a WCAG requirement itself
Inline text links within a paragraph are exempted appropriately	Documented exception within 2.5.8

What to do next

Measure the interactive elements on a current site’s mobile layout against the 24-pixel minimum. Separately, test them by tapping with an actual thumb on a real phone, rather than assuming a passing measurement guarantees a comfortable result. For where this usability standard sits inside a build, website design services covers the service scope it belongs to. The full legal accessibility obligation this specific criterion sits inside is covered on website accessibility in Australia.