Skip to content

Touch Target Size Checker

Check your interactive elements against WCAG 2.5.8 minimum touch target size requirements. Find undersized buttons, links, and inputs with fix suggestions.

FreeNo SignupNo Server UploadsZero Tracking

We fetch the page client-side. Some sites may block external access — use "Paste HTML" as a fallback.

Enter a URL or paste HTML above to check touch target sizes against WCAG 2.5.8.
Embed code
<iframe src="https://wcagkit.com/embed/touch-target-checker" width="100%" height="600" frameborder="0" title="Touch Target Size Checker - wcagkit"></iframe>
<p style="font-size:12px;text-align:center;margin-top:4px;">
  <a href="https://wcagkit.com/tools/touch-target-checker" target="_blank" rel="noopener">Powered by wcagkit</a>
</p>
Attribution preview

Powered by wcagkit

How to Use Touch Target Size Checker

  1. 1

    Paste your HTML

    Copy the HTML source code containing interactive elements like buttons, links, and form inputs.

  2. 2

    Click Analyze

    Press the Analyze button to parse all interactive elements and extract their size information.

  3. 3

    Review results

    See each element's detected size and whether it meets the 24x24px minimum touch target requirement.

  4. 4

    Apply fix suggestions

    For failing elements, review the suggested CSS fixes to increase their touch target size.

Frequently Asked Questions

WCAG 2.5.8 (Target Size Minimum) requires that interactive targets have a size of at least 24x24 CSS pixels, unless the target is inline within text, the user agent controls the size, the size is essential to the information being conveyed, or there is an equivalent target elsewhere on the page that meets the requirement.

Small touch targets are difficult to activate for users with motor impairments, tremors, or limited dexterity. They also cause problems for users on mobile devices, users with large fingers, and users in moving environments. Adequate target size reduces errors and frustration for all users.

WCAG 2.5.5 (Level AAA) requires targets to be at least 44x44 CSS pixels. WCAG 2.5.8 (Level AA, new in WCAG 2.2) is less strict, requiring only 24x24 CSS pixels. The 2.5.8 criterion also accounts for spacing between targets.

This tool analyzes inline styles, width/height attributes, and size attributes to determine element dimensions. It cannot evaluate external CSS class-based sizing since it only analyzes the HTML markup. Elements without detectable size information are flagged for manual review.

No. All analysis happens entirely in your browser. Your HTML code never leaves your device.

Related Tools

Focus Order Visualizer

Visualize keyboard tab order

Try it

Keyboard Trap Detector

Detect keyboard traps

Try it
Fo

Form Analyzer

Check form accessibility

Try it

ARIA Validator

Validate ARIA attributes

Try it

Understanding Touch Target Size in Web Accessibility

Touch target size is a critical aspect of web accessibility that affects how easily users can interact with clickable and tappable elements. WCAG 2.2 introduced Success Criterion 2.5.8 (Target Size Minimum) at Level AA, establishing a minimum target size of 24x24 CSS pixels for interactive elements. This requirement ensures that buttons, links, form controls, and other interactive elements are large enough for users with motor impairments to activate reliably.

Who Benefits from Adequate Touch Target Sizes

Users with motor impairments, tremors, or limited fine motor control benefit most directly from larger touch targets. However, the benefits extend to mobile users operating devices with one hand, users in moving vehicles, elderly users with declining dexterity, and anyone using a device in challenging physical conditions. Research shows that error rates increase significantly when touch targets fall below recommended minimums.

Common Touch Target Size Failures

Icon-only buttons without adequate padding are the most common failure. Close buttons, hamburger menu icons, social media icons, and pagination controls frequently fall below the minimum size. Form checkboxes and radio buttons styled without sufficient click area, small navigation links packed tightly together, and action icons in data tables are also frequent offenders.

How to Fix Small Touch Targets

The simplest fix is adding padding to interactive elements. A button with a 16x16 pixel icon needs at least 4 pixels of padding on each side to meet the 24x24 minimum. Using min-width and min-height CSS properties ensures elements never shrink below the required size. For inline links within text, the 24x24 requirement does not apply, but adequate line spacing helps. Consider using the CSS touch-action property and ensuring tap highlight areas are visible on mobile.