1. Home
  3. Design
  5. Touch Target Size Checker

Touch Target Size Checker

Check a button or link size against WCAG 2.2, Apple HIG and Material Design touch target guidance.

Runs in your browser Free

Guidelines differ: WCAG sets a legal-style minimum, while platform guides recommend comfortable sizes. 1 CSS px ≈ 1 iOS pt ≈ 1 Android dp at default zoom.

Small buttons lose users

Tiny buttons and links crammed together are hard to tap on mobile, causing mis-taps, frustration and lost conversions. For people with motor impairments they're a serious accessibility barrier.

Standards checked

  • WCAG 2.2 AA (2.5.8): at least 24×24 CSS pixels or enough spacing
  • WCAG 2.2 AAA (2.5.5): at least 44×44 CSS pixels
  • Apple Human Interface Guidelines: 44×44 points
  • Material Design: 48×48 dp

Visual comparison

Enter your button's width, height and spacing to neighbouring elements. The tool shows which guidelines are met and compares the size visually with the targets.

How to use Touch Target Size Checker

  1. Enter the button or link width and height.
  2. Enter the spacing to neighbouring elements.
  3. Review which guidelines are met.
  4. Increase the size or spacing if needed.

Why use this tool?

Verify mobile usability and accessibility at the design stage.

FAQ

What size should I aim for?

WCAG 2.2 AA requires at least 24×24 px (with a spacing exception); 44×44 px (WCAG AAA, Apple) or 48×48 dp (Material) is more comfortable.

What if the icon is small?

Add padding to enlarge the tap area without making the icon bigger.

Do inline text links have to meet this?

WCAG 2.2 exempts inline links within sentences from this requirement.

Related tools

Private

WCAG Contrast Checker

Check the contrast ratio of text and background colours against WCAG AA and AAA.

Open tool
Private

PX to REM and EM Converter

Convert pixels to rem and em (and back) based on your root and parent font sizes.

Open tool
Private

CSS clamp() Generator

Create a fluid CSS clamp() value that scales between a minimum and maximum size with the viewport width.

Open tool
Private

Color Scale Generator (50–950)

Turn one base colour into a Tailwind-style 50–950 shade scale with CSS variables and config output.

Open tool