Touch Target Size & Spacing Visualizer
Check interactive target sizes and spacing against WCAG, iOS, Material, or custom minimum requirements.
Workspace
Background & settings
PNG, JPEG, or WebP. Processed locally only.
Canvas
Drag on the canvas to draw a target. You can also use the manual target form for keyboard entry.
Results
Targets
Introduction
Small touch targets are a common mobile usability and accessibility problem. Buttons, links, icons, and form controls need enough target area for users to activate them reliably.
This visualizer helps you review design screenshots and manually verify whether interactive areas meet your chosen target size and spacing expectations.
How it works
Load a screenshot or use the blank canvas. Draw rectangles over interactive elements or enter their coordinates manually. The tool compares each rectangle against the selected minimum size and spacing threshold.
- Images are loaded through the File API and never uploaded.
- Coordinates are interpreted as canvas pixels.
- The device pixel ratio converts canvas pixels to CSS pixels.
- Target results are listed below the canvas for accessible review.
How to use
- Load a screenshot, or use the blank canvas.
- Set the device pixel ratio if the screenshot is scaled.
- Select a target size preset or enter custom dimensions.
- Draw or enter rectangles for buttons, links, and controls.
- Review pass/fail results and spacing warnings.
- Copy the report for documentation.
Practical example
A mobile navigation icon may be visually 20 × 20 pixels, but if its tap area includes 12 pixels of padding on each side, the effective target size may be 44 × 44 pixels. Use the visualizer to measure the effective target area, not just the visible icon.
Use cases
- Reviewing mobile mockups before development.
- Auditing touch targets during accessibility testing.
- Checking icon buttons, tabs, and form controls.
- Comparing designs against WCAG or platform guidance.
- Documenting spacing and target-size issues.
Best practices
- Measure the full tap area, including padding.
- Avoid placing small targets close together.
- Use larger targets for primary actions.
- Test with real fingers, not only mouse pointers.
- Consider one-handed use on small screens.
Common mistakes
- Measuring only the visible icon instead of the clickable area.
- Forgetting device pixel ratio when using high-resolution screenshots.
- Assuming desktop hover states compensate for small touch targets.
- Placing links too close to adjacent interactive controls.
- Testing only on large devices.
Limitations
- This tool does not automatically detect interactive elements.
- Accuracy depends on the screenshot scale and the device pixel ratio.
- Spacing guidance is heuristic and may differ by standard.
- The tool does not replace device testing.
Browser compatibility
The tool uses standard Canvas and File APIs and works in current versions of major browsers.
FAQ
Is my screenshot uploaded?
No. The image is processed locally using the File API.
What is the WCAG minimum target size?
WCAG 2.2 includes a minimum target size criterion of 24 × 24 CSS pixels, with specific exceptions. Review the official criterion for full details.
Does spacing count toward target size?
Some guidelines allow spacing to contribute under certain conditions. This tool provides a practical spacing check but does not replace the exact rule text.
Can it detect buttons automatically?
No. The tool is a manual visual inspection helper. You define the target rectangles.