consolelog.tools logo

Touch Target Size Checker

Check if touch targets meet accessibility guidelines (WCAG, iOS, Android)

✗
FAIL
Fail: Too small for accessibility standards.
Effective size: 32×32px

Touch Target Dimensions

Visual Preview

32×32
Touch area: 32×32px
48
48px guideline
44
44px guideline
34
34px guideline

Accessibility Guidelines

WCAG 2.1 (Level AAA)
Min: 44px

Minimum touch target size for AAA compliance

Apple iOS
Min: 44px

Apple Human Interface Guidelines

Android Material
Min: 48px

Google Material Design Guidelines

Microsoft
Min: 34px

Microsoft Accessibility Guidelines

Recommendations

To meet all accessibility guidelines, add padding:

  • Horizontal padding: 8px
  • Vertical padding: 8px

Common UI Elements

Generated CSS

.touch-target {
  width: 32px;
  height: 32px;
  padding: 8px 8px;
  /* Ensure minimum touch area */
  min-width: 44px;
  min-height: 44px;

  /* Center content */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Visual feedback */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.touch-target:active {
  transform: scale(0.95);
}

Spacing Between Targets

Minimum spacing between targets8px

Prevents accidental taps on adjacent elements

Comfortable spacing16px

Recommended for better usability

Generous spacing24px

Ideal for primary actions

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Frequently Asked Questions - Touch Target Size Checker