Designers

Tools / Touch targets

Touch targets Free

Checks target sizes and spacing against WCAG 2.5.8 (24 by 24 with the spacing exception), 44 for iOS and the web, and 48 for Android.

MCP tool name: check_touch_targets. REST: POST /api/touch-targets. Free: 60 runs a day per IP. Pro: no cap.

Ask for it in plain words

Do these targets meet guidelines? Save 40x32 gap 8, Close 32x32 gap 4.

Check target sizes and spacing against WCAG 2.2 SC 2.5.8 (24 by 24 CSS px, or a smaller target with enough spacing), the 44px guidance for iOS and the web, and 48dp for Android. Pass targets as a list of {name, width, height, gap, inline} or text lines like 'Save button 40x32 gap=8'. Returns pass or fail per guideline with advice.

Inputs

NameTypeMeaning
targetsarrayTargets to check
textstringOr lines like 'Close icon 32x32 gap=4'

* required

Example

curl -X POST https://designers.allthepossibles.com/api/touch-targets \
  -H "content-type: application/json" \
  -d '{"text":"Close icon 32x32 gap=4\nSave button 40x32 gap=8\nTiny toggle 16x16\nInline link 14x14 inline"}'

Example output

The report field, for the input above (structured fields come back alongside it):

4 targets: 1 fail WCAG 2.5.8 (24 by 24 minimum), 4 under 44, 4 under 48

ok    Close icon  32x32 gap 4  2.5.8 pass, 44: no, 48: no
      Meets WCAG 2.2 AA but is small for fingers; use 44 on iOS and the web, 48 on Android, or pad the hit area without changing the visible size.
ok    Save button  40x32 gap 8  2.5.8 pass, 44: no, 48: no
      Meets WCAG 2.2 AA but is small for fingers; use 44 on iOS and the web, 48 on Android, or pad the hit area without changing the visible size.
FAIL  Tiny toggle  16x16  2.5.8 fail, 44: no, 48: no
      Under 24px on its short side and no spacing given. Make it at least 24 by 24, or add spacing so that size plus gap reaches 24; for touch aim for 44.
ok    Inline link  14x14  2.5.8 exempt, 44: no, 48: no
      Meets WCAG 2.2 AA but is small for fingers; use 44 on iOS and the web, 48 on Android, or pad the hit area without changing the visible size.

Rules used: WCAG 2.2 SC 2.5.8 (AA) needs 24 by 24 CSS px, or a smaller target with enough spacing that a 24px circle centred on it does not touch another target; inline links in text are exempt. SC 2.5.5 (AAA) and Apple's guidance use 44; Material uses 48dp. Measure the hit area, which can be larger than the visible icon.

What it looks like

The Touch targets tool on the Designers homepage, with its example input and result

Limits of this tool

Deterministic: the same input always gives the same answer. It does not call a language model.