What Is a Touch Target Size Checker?
A touch target size checker evaluates whether your interface elements — buttons, links, icons, checkboxes — meet the minimum tap area requirements defined by accessibility guidelines and platform standards. Undersized targets are one of the most common mobile usability failures and a frequent WCAG audit finding.
This tool lets you input element dimensions and spacing, then instantly checks them against WCAG 2.2, Apple Human Interface Guidelines, and Google Material Design standards. It flags undersized elements and tells you exactly how much padding to add — helping you fix accessibility issues before they reach users.
How to Use This Tool
- Enter element dimensions — Input the width and height of your UI element in pixels. Use browser DevTools to measure the actual rendered size of interactive elements.
- Add spacing context — Enter the spacing between adjacent interactive elements. Adequate spacing prevents accidental taps on neighboring buttons.
- Select your target guidelines — Choose which standards to validate against: WCAG 2.2 AA, WCAG AAA, Apple HIG, or Material Design.
- Review the results — The tool highlights pass/fail status for each guideline and provides specific remediation guidance for any failures.
Tips and Best Practices
- → Use padding, not just visual size. A 16px icon can have a 44px touch target by adding padding to the clickable area. The visual element doesn't need to be large — the interactive hit area does.
- → Don't forget spacing. Even properly sized targets fail if they're too close together. WCAG 2.2 requires at least 24px of space between adjacent interactive elements to prevent accidental activation.
- → Test on real devices. Pixel measurements in DevTools don't always reflect the physical tap area on different screen densities. Test on actual phones and tablets to validate your implementations.
- → Check all interactive elements. Buttons get the most attention, but links, icons, form inputs, radio buttons, and navigation items all need adequate touch targets. Use our Contrast Checker to ensure those elements are also visually accessible.
Frequently Asked Questions
📖 Learn More
Related Article How to Use Responsive Breakpoints Effectively → Related Article How to Visualize Focus Order for Accessibility →Built by Derek Giordano · Part of Ultimate Design Tools