Skip to main content
PUBLIC.INTERNET
⚡ Acceso Inmediato🔒 Privacidad Primero🆓 Siempre Gratis📱 Funciona en Todos Lados

WCAG Target Size Checker (24px)

WCAG 2.2 added success criterion 2.5.8, Target Size (Minimum), which says interactive targets should be at least 24 by 24 CSS pixels, or have enough spacing that a 24px circle centered on each one does not overlap a neighbor. That spacing exception is the part most checkers ignore: a 20px icon button can still pass if the gaps around it are wide enough. This tool models the actual geometry. Set the Target size, the Gap between targets, and the Number of targets, and it lays out a row of buttons and draws the real 24px circle on each one. The circles turn green when the layout clears the rule and red when they collide. A verdict explains the math in plain numbers (center-to-center distance versus the 24px minimum), and the Suggested CSS panel gives you either a simple min-size rule or, if you need smaller targets, the exact gap that satisfies the spacing exception.

Suggested CSS

Visualizer
Each ring is the 24px circle WCAG draws on a target. When targets are under 24px, the rings must not overlap. Green rings clear; red rings collide.
How to Check Target Size
  1. Set the target size - Drag Target size to your real button or icon dimensions in pixels.
  2. Set the gap - Drag Gap between targets to the spacing your layout uses between adjacent controls.
  3. Read the verdict - The status box shows pass or fail and the center-to-center distance, so you can see why; toggle Show the 24px target circles to view the geometry.
  4. Adjust until it clears - Increase the size to 24px or widen the gap until the rings turn green.
  5. Copy the CSS - Click Copy to grab a min-size rule, or a gap value that meets the spacing exception when you keep smaller targets.
Why This Tool?
 Most results for target size are guideline write-ups, and the few interactive checkers test a single element against a flat 24px threshold. That misses how the criterion actually works. A toolbar of 20px icons is a common real design, and whether it passes depends entirely on the spacing between them, not the icon size alone. Seeing the 24px circles overlap or clear makes that trade-off concrete in a way a pass/fail number does not. 
 The geometry is simpler than it sounds: in a row, the center-to-center distance between adjacent targets equals the target size plus the gap, and each target's 24px circle has a 12px radius, so two circles avoid overlapping when that distance is at least 24px. That is why a 16px target needs an 8px gap, while a 24px target needs none. A practical tip: pointer inputs are exempt and the criterion targets touch, so prioritize this on mobile toolbars, pagination, and densely packed icon buttons where fingers, not cursors, do the tapping.