Free Online Touch Target Size Checker
Check button dimensions against touch accessibility guidelines.
The space between this control and its nearest neighboring tap target.
These are minimums, not targets. A 44px or 48px control is usually more comfortable than a 24px one, especially for people with limited dexterity or for use while moving.
Actual-size comparison
Detailed results
| Guideline | Minimum | Result | Recommendation |
|---|
About the Touch Target Size Checker
A touch target is the area that responds to a tap, not necessarily the visible icon. When that area is too small, people miss the control, tap the wrong thing, or give up. This checker compares the width, height, and spacing of a target against three widely used guidelines: the WCAG 2.2 minimum, Apple's Human Interface Guidelines, and Google's Material Design guidance. It reports a pass or fail for each and explains what to change.
The three guidelines
WCAG 2.2 Success Criterion 2.5.8 sets a minimum target size of 24 by 24 CSS pixels, with an important exception: if a smaller target has at least a 24-pixel-diameter circle centered on it that does not overlap another target, it can still pass. That spacing exception is why this tool asks for the gap to the nearest neighbor. Apple's guideline recommends 44 by 44 points, and Material Design recommends 48 by 48 density-independent pixels. The larger figures reflect comfortable thumb use rather than strict conformance.
Size versus spacing
A small icon can be perfectly usable if it sits in a generous hit area. Designers often keep a 16px or 20px glyph but expand the button's padding to 44px or more. The visible size and the interactive size are separate decisions. When space is tight, spacing helps, but it does not make a control easier to see or aim at. For the most reliable result, enlarge the hit area first and use spacing as a secondary measure.
Beyond dimensions
Target size is only one part of touch accessibility. Controls should also have a visible focus state, an accessible name, and enough contrast against their background. Destructive actions should not sit immediately next to common ones, and gestures should have a simple alternative. Test on a real phone with one hand, then test again with the text size increased. The actual-size comparison above is drawn in CSS pixels, so it reflects the layout size rather than the physical size of your screen.
Frequently asked questions
Does a 24×24 target always pass WCAG 2.2?
It meets the size threshold, but the criterion also considers spacing and whether an equivalent control is available elsewhere. The spacing exception allows smaller targets when a 24-pixel circle around each one does not overlap. This tool approximates that using the gap you enter.
Why do Apple and Material recommend larger sizes than WCAG?
WCAG defines a minimum for accessibility conformance, while platform guidelines aim for comfortable everyday use. Thumbs are less precise than a mouse pointer, and people often tap while walking or holding a device with one hand. Larger targets reduce errors for everyone.
Should the visible icon be 48px?
Not necessarily. The hit area should be at least 48px, but the icon inside can be smaller. Use padding or a transparent pseudo-element to extend the clickable region without making the visual control look oversized.