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

  1. 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.
  2. Add spacing context — Enter the spacing between adjacent interactive elements. Adequate spacing prevents accidental taps on neighboring buttons.
  3. Select your target guidelines — Choose which standards to validate against: WCAG 2.2 AA, WCAG AAA, Apple HIG, or Material Design.
  4. Review the results — The tool highlights pass/fail status for each guideline and provides specific remediation guidance for any failures.

Tips and Best Practices

Frequently Asked Questions

What is a touch target?+
A touch target is the interactive area of a UI element — like a button, link, or icon — that users tap on touchscreen devices. If the target is too small, users struggle to tap accurately, leading to frustration and accessibility failures.
What size should touch targets be?+
WCAG 2.2 Success Criterion 2.5.8 recommends a minimum of 24×24 CSS pixels, with a preferred target size of 44×44 pixels for comfortable tapping. Apple's HIG recommends 44pt and Google's Material Design recommends 48dp.
Does this tool test my live website?+
The tool lets you input element dimensions and spacing to check compliance against WCAG, Apple HIG, and Material Design guidelines. For live site testing, combine this with browser DevTools to measure actual rendered sizes.
Why do touch target sizes matter for accessibility?+
People with motor impairments, tremors, or limited dexterity need larger tap areas to interact reliably. Small targets also cause problems for users with vision impairments who may not see exactly where to tap.
Is my data stored anywhere?+
No. All calculations run in your browser. No element data or measurement information is ever sent to a server.
What guidelines does it check against?+
The tool validates against WCAG 2.2 Level AA (24×24px minimum), WCAG Level AAA (44×44px), Apple Human Interface Guidelines (44pt), and Google Material Design (48dp).
What is the recommended minimum touch target size?+
WCAG 2.5.5 (AAA) requires 44x44 CSS pixels minimum. Apple HIG recommends 44pt minimum (which equals 44 CSS pixels for 1x displays). Google Material recommends 48dp (which equals roughly 48 CSS pixels on Android). The checker uses 44x44 as the default minimum but lets you switch to 48x48 for Material projects. Targets smaller than these minimums cause measurable user-error rates, especially for users with motor impairments.
Does spacing between targets matter as much as target size?+
Yes. WCAG 2.5.8 (AA, new in WCAG 2.2) requires 24x24 CSS pixels with at least 24px between target centers. Tightly packed small targets (think dense form layouts) cause tap-on-wrong-target errors even if each individual target meets the size minimum. The checker shows both per-target size and inter-target distance, flagging dense clusters even when each individual element passes.

📖 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

Privacy Policy · Terms of Service