Home› Graphic Design›Touch Target Size Checker
Graphic Design tool

Touch Target Size Checker

Check button and link dimensions against WCAG 2.2 target-size minimum guidance and a simplified spacing test.

Check touch target size and spacing

Compare a target's CSS pixel dimensions with the WCAG 2.2 24 × 24 CSS px minimum or a simplified same-size spacing condition.

Direct 24 × 24 test—
Horizontal center spacing—
Vertical center spacing—
Simplified result—

WCAG 2.2 touch target size checker

WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum) requires pointer targets to be at least 24 by 24 CSS pixels, or to satisfy a spacing condition, subject to listed exceptions. The official wording and exceptions matter for conformance. W3C Target Size (Minimum) guidance.

What this checker does

The direct test is simple: both width and height must be at least 24 CSS px. For smaller controls, this tool also shows center-to-center spacing using a simplified assumption that adjacent targets have the same dimensions and the entered edge gap. Real interfaces can have irregular shapes, diagonal neighbors, inline links and overlapping exclusion circles, so spacing needs visual/manual verification.

Why larger targets may still be desirable

Passing a minimum success criterion is not the same as creating an easy-to-use interface. Touch accuracy varies with device, motor ability, context and motion. Teams commonly choose larger controls for primary actions even when 24px would satisfy the minimum criterion.

Use CSS pixels, not physical screen pixels

WCAG expresses the requirement in CSS pixels. Inspect the rendered CSS box rather than multiplying by device pixel ratio. Also verify focus visibility, accessible names, keyboard operation and spacing as separate accessibility concerns.

Frequently asked questions

What is the WCAG 2.2 minimum target size?
Success Criterion 2.5.8 uses 24 by 24 CSS pixels, with a spacing alternative and specific exceptions. Consult the W3C criterion for the complete rule.
Does a 24 × 24 button automatically make my page accessible?
No. Target size is only one requirement. Keyboard access, focus, contrast, labeling, semantics and other criteria still apply.
Why does the tool call the spacing result simplified?
The actual WCAG spacing condition uses non-overlapping 24px-diameter circles and can involve differently sized or positioned targets. This calculator assumes same-sized orthogonal neighbors.
Should I enter device pixels?
No. Enter the rendered target size in CSS pixels.