How big should a touch target be: 24px, 44px, or 48dp?
WCAG 2.2 sets 24×24 CSS px at Level AA and 44×44 at AAA. Here is how those rules differ from Android's 48dp guidance.
A close icon can look perfectly clear and still be hard to tap without hitting its neighbor. The drawing and the area that responds do not have to be the same size. You can keep the icon small and give its button a larger, invisible hit area. Should that area follow 24px, 44px, or 48dp?
The web minimum is 24×24 CSS px
WCAG 2.2 Success Criterion 2.5.8 sets a minimum target size of 24×24 CSS pixels for pointer input. It is a Level AA criterion added in WCAG 2.2. This means more than setting both dimensions to 24px. The W3C explanation says an axis-aligned 24×24 square must fit completely inside the target. A rounded shape can therefore be undersized if that square does not fit.
An undersized target does not automatically fail. Center an imaginary circle 24 CSS pixels in diameter on its bounding box. The spacing exception applies if that circle intersects neither another target nor the circle around another undersized target. W3C’s example has 20×20 targets: a 4px gap passes, while no gap fails. The test uses the clickable target boundary, not just the visible icon.
Other exceptions cover an equivalent conforming target on the same page; a target that is in a sentence or whose size is otherwise constrained by the line height of non-target text; and unmodified user-agent controls. An exception also applies when a particular presentation of the target is essential or legally required for the information being conveyed. These conditions determine AA conformance; in practice, favor a size that is easy to operate.
44 is the stronger WCAG target
Success Criterion 2.5.5 is a Level AAA criterion requiring at least 44×44 CSS pixels. Unlike 2.5.8, it has no spacing exception for undersized targets. Its equivalent exception requires the target performing the same function on the same page to be at least 44×44 CSS pixels. Other exceptions cover targets in sentences or blocks of text, unmodified user-agent controls, and essential presentations.
“WCAG requires 44px” describes only the AAA criterion, while “24px is always enough” overlooks the exceptions and practical usability. For Level AA, test 2.5.8’s 24px rule and exceptions. For a roomier target, 2.5.5 offers a 44px goal. A CSS pixel is also different from a hardware pixel. CSS Values recommends that user agents on screens anchor pixel units to the reference pixel, so a high-resolution display may use several device pixels to draw one CSS pixel.
Android 48dp is separate guidance
Android’s developer guide recommends a focusable area of at least 48×48dp for every interactive element on a touch interface. The guide also says that many built-in Material components in Compose already enforce that minimum.
WCAG’s CSS px criteria and Android’s dp recommendation apply in different environments and cannot be ordered by their numbers alone. Evaluate a web page against WCAG; for a native app, also follow its platform guidance. Platform pages can change, so record the source and check date next to the design-system value.
In practice, use padding or a minimum size on the button so the hit area can grow while the SVG artwork stays compact. For a row of small controls, inspect both real hit boundaries and the gaps. Automated checks can help, but circle intersections and contextual exceptions still need human review; include pointer testing at narrow widths. Visibility and operability are separate checks, so review WCAG color contrast independently.
Sources
- WCAG 2.2, SC 2.5.5 and 2.5.8
- Understanding SC 2.5.8 and Understanding SC 2.5.5
- CSS Values and Units Level 4
- Android accessibility guide
Links and content checked October 5, 2026.