Designers
ToolsDocsProAll the Possibles

All 141 tools / Accessibility checks

Estimate which buttons and links fall under 24px or 44px tap size from your CSS and markup

Touch target estimate from CSSFreeFor developers and designers

15/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

css: .nav a{display:inline-block;padding:2px 4px;font-size:13px;line-height:1.2}.tool{width:20px;height:20px}
html: <nav class="nav"><a href="/a">Cast</a><a href="/b">Shows</a><a href="/c">Venues</a></nav><button class="tool" aria-label="Search"></button>

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

THIS IS AN ESTIMATE from CSS and markup. It does not lay the page out. A rendered measurement (snippet at the end) is more accurate and should settle anything below.
Source: pasted input. Viewport assumed for media queries: 390px. Read 2 CSS rule selectors; 2 used for matching, 0 skipped (state, sibling or structural selectors).
Interactive elements found: 4; analysed 4; hidden by CSS, the hidden attribute or a 1px visually-hidden pattern 0. Possibly failing 2.5.8 (under 24px with less estimated spacing than needed; an estimate, confirm in a browser before filing it): 1. Under 24px but alone or spaced enough: 3. Under the 44px guidance: 4. Inline links (exempt inside a sentence): 0. Size could not be estimated: 0.

FAIL-ESTIMATE | 1x button.tool | smallest est. 20px wide x 20px high (explicit height) | e.g. "Search" | gap needed 4px, estimated 0px | under 44px guidance
UNDER-24-SPACED | 3x a | smallest est. 35px wide x 19.6px high (line-height + padding + border) | e.g. "Cast" | gap needed 0px, estimated 0px | under 44px guidance

HOW TO READ THIS
... full output on the tool page

What you get

Interactive elements grouped by kind with estimated size, status, and a rendered-measurement snippet

What it cannot do

An estimate from rules and markup, not a layout; text width is guessed, so confirm borderline results in a browser.

Who it is for

  • Developers
  • Designers

Free and Pro

Free15 runs a day per IP address, up to 200,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called touch_target_css. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/touch-target-css -H 'content-type: application/json' -d '{"css":".nav a{display:inline-block;padding:2px 4px;font-size:13px;line-height:1.2}.tool{width:20px;height:20px}","html":"<nav class=\"nav\"><a href=\"/a\">Cast</a><a href=\"/b\">Shows</a><a href=\"/c\">Venues</a></nav><button class=\"tool\" aria-label=\"Search\"></button>"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in accessibility checks

All accessibility checks tools