Find buttons, links and inputs missing hover, focus-visible, pressed or disabled styles in your CSS

State coverage checkFreeFor designers and developers

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.

:root {
  --ink: #1a1a1a;
  --paper: #fafaf7;
  --accent: #e4572e;
  --accent-hover: var(--accent);
  --space-2: 8px;
  --radius: 6px;
  --font-body: "Source Serif 4", Georgia, serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) { :root { --ink: #f2f2ee; --paper: #141414; } }
body { font: 400 17px/1.55 var(--font-body); color: var(--ink); background: var(--paper); }
h1 { font-size: 48px; line-height: 1.05; margin: 0 0 24px; }
h2 { font-size: 30px; margin: 32px 0 12px; }
small { font-size: 13px; }
...

After: what comes back

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

# State coverage

3 interactive components: 2 with a focus style, 2 with hover, 1 with pressed, 1 with disabled.

## Findings

- high: 1 rule removes the focus outline without a replacement (first: .btn). Fix: Draw a visible indicator on :focus-visible (a 2px outline with offset, or a box-shadow ring) before removing the default.
- high: 1 interactive component has no :focus-visible style: .btn. Fix: Add one shared :focus-visible rule for links, buttons and controls, then override per component only when needed.
- medium: 1 component has no :hover style: .button.
- low: 2 interactive components have no :focus-visible rule and nothing removes the outline, so the browser's default focus ring applies: .button, a. Fix: That passes 2.4.7, but the default ring can be low contrast on dark or coloured backgrounds; add one shared :focus-visible rule if you want a ring that matches the design.
- low: 2 components have no disabled style: .btn, .button.
- low: 2 components have no :active (pressed) style.

## Components
... full output on the tool page

What you get

A state table per interactive component and every rule that removes the focus outline without a replacement

What it cannot do

Reads CSS only; states applied by script or inline style are not seen.

Who it is for

Designers
Developers

Free and Pro

Free	15 runs a day per IP address, up to 100,000 characters a run.
Pro	No 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 check_state_coverage. 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/state-coverage -H 'content-type: application/json' -d '{"css":":root {\n  --ink: #1a1a1a;\n  --paper: #fafaf7;\n  --accent: #e4572e;\n  --accent-hover: var(--accent);\n  --space-2: 8px;\n  --radius: 6px;\n  --font-body: \"Source Serif 4\", Georgia, serif;\n  --ease: cubic-bezier(0.2, 0, 0, 1);\n}\n@media (prefers-color-scheme: dark) { :root { --ink: #f2f2ee; --paper: #141414; } }\nbody { font: 400 17px/1.55 var(--font-body); color: var(--ink); background: var(--paper); }\nh1 { font-size: 48px; line-height: 1.05; margin: 0 0 24px; }\nh2 { font-size: 30px; margin: 32px 0 12px; }\nsmall { font-size: 13px; }\n.btn { padding: 10px 18px; border-radius: var(--radius); background: var(--accent); color: #fff; border: 0; outline: none; transition: background 180ms var(--ease); }\n.btn:hover { background: #c9441f; }\n.button-secondary { padding: 9px 16px; border-radius: 4px; border: 1px solid #1a1a1a; background: transparent; }\n.card { padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 15px; }\na { color: var(--accent); }\na:hover { text-decoration: underline; }\n@media (min-width: 768px) { .card { padding: 28px; } }"}'

Try it here

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

Page URL (Pro reads every linked stylesheet)Or paste CSS

:root {
  --ink: #1a1a1a;
  --paper: #fafaf7;
  --accent: #e4572e;
  --accent-hover: var(--accent);
  --space-2: 8px;
  --radius: 6px;
  --font-body: "Source Serif 4", Georgia, serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) { :root { --ink: #f2f2ee; --paper: #141414; } }
body { font: 400 17px/1.55 var(--font-body); color: var(--ink); background: var(--paper); }
h1 { font-size: 48px; line-height: 1.05; margin: 0 0 24px; }
h2 { font-size: 30px; margin: 32px 0 12px; }
small { font-size: 13px; }
.btn { padding: 10px 18px; border-radius: var(--radius); background: var(--accent); color: #fff; border: 0; outline: none; transition: background 180ms var(--ease); }
.btn:hover { background: #c9441f; }
.button-secondary { padding: 9px 16px; border-radius: 4px; border: 1px solid #1a1a1a; background: transparent; }
.card { padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 15px; }
a { color: var(--accent); }
a:hover { text-decoration: underline; }
@media (min-width: 768px) { .card { padding: 28px; } }