Touch Target Size Checker

What Is a Touch Target Size Checker?

A touch target is an interactive area that users tap or click to perform an action. Common examples include buttons, navigation links, checkboxes, and form controls.

The Touch Target Size Checker helps identify elements that may not meet your selected minimum width and height requirements. Enter HTML markup, configure the minimum dimensions, and check the results to find potentially undersized touch targets.

This tool is useful for web developers, UI/UX designers, and accessibility testers who want to improve mobile usability and make interactive elements easier to operate.

Minimum Touch Target Size for Mobile

The minimum touch target size depends on the accessibility guideline being followed. WCAG 2.2 includes two commonly referenced requirements:

• 24 × 24 CSS pixels: WCAG 2.2 Success Criterion 2.5.8 (Level AA), subject to specified exceptions.

• 44 × 44 CSS pixels: WCAG 2.2 Success Criterion 2.5.5 (Level AAA), also subject to specified exceptions.

A larger touch target can make buttons and links easier to use, particularly on mobile devices.

When checking touch target dimensions, consider these factors:

• Width: The horizontal dimension of the interactive element.

• Height: The vertical dimension of the interactive element.

• Spacing: The distance between neighboring targets, which can affect the applicability of WCAG's minimum-size exceptions.

• CSS pixels: The units used to measure web layout dimensions, rather than the physical pixels of a device screen.

Use the checker to identify elements that fall below your selected dimensions. Remember that a size check alone does not establish full WCAG compliance.

How to Use the Touch Target Size Checker

1. Enter HTML code: Paste the markup containing buttons, links, or other supported interactive elements.

2. Set minimum dimensions: Specify the minimum width and height in pixels.

3. Check targets: Run the analysis using the tool's check function.

4. Review the results: Identify elements that fall below the selected size requirements.

5. Fix and recheck: Adjust the relevant CSS dimensions or padding, then analyze the updated markup.

Touch Target Size Calculation Example

The following example demonstrates how a small button can be checked against a minimum touch target size.

Input : <button style="width: 20px; height: 18px;">Menu</button>

Settings:

• Minimum width: 24 px

• Minimum height: 24 px

Output:

How to Fix Touch Targets That Are Too Small

If an interactive element falls below your selected minimum size, consider these improvements:

• Increase its width and height using CSS.

• Add padding to buttons and links to create a larger interactive area.

• Expand the clickable area of icon-only controls.

• Add sufficient space between neighboring interactive elements.

• Test the updated layout on mobile devices and recheck the dimensions.

For example, a menu icon can remain visually small while its surrounding button provides a larger clickable area. Ensure the interactive area is usable and does not overlap neighboring controls.