Designers
ToolsDocsProAll the Possibles

All 141 tools / Colour and contrast

Find which real text and background colour pairs in your CSS fail WCAG contrast, with file and line

CSS contrast pairsFreeFor 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{--paper:#faf5ea;--ink:#1a1814;--mute:#8f8a80;--gold:#c79a55}
@media (prefers-color-scheme: dark){:root{--paper:#0e0e0e;--ink:#f2f0eb;--mute:#8c8c8c}}
body{background:var(--paper);color:var(--ink)}
.kicker{color:var(--mute);font-size:14px}
.card{background:var(--ink)}
.card .dim{color:var(--gold);font-size:13px}

After: what comes back

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

Source: pasted input. Read 6 CSS rule selectors from 1 source. Viewport for width media queries: 1280px.
Checked 6 text colour pairs (light: 3, dark: 3). Failing (background stated): 1. Would fail on an assumed background: 1. Passing with a thin margin (under 15 percent above the line): 0. Background assumed: 2. Over an image or gradient: 0. Colour not resolvable: 0.

FAILING PAIRS
  dark | .card .dim | #c79a55 on #f2f0eb | 2.25:1 (needs 4.5) | APCA Lc 41.2, spot text only, not for reading | text pasted css:6, background pasted css:5 | 13px

BACKGROUND ASSUMED (no markup was supplied, so the tool cannot see which ancestor the text sits in; the ratio uses the page root colour, or white when there is none. A dark section further up the page would make this wrong in either direction, so treat a pass here as unverified)
  light | .kicker | #8f8a80 on #faf5ea (page root body) | 3.16:1 WOULD FAIL, needs 4.5 at 14px | text pasted css:4
  dark | .kicker | #8c8c8c on #0e0e0e (page root body) | 5.74:1 unverified, would pass only if the root colour is the real background at 14px | text pasted css:4

LIMITS
... full output on the tool page

What you get

Failing pairs with WCAG ratio, APCA Lc, source line, plus thin margins and assumed backgrounds

What it cannot do

Reads CSS only: no rendering, no inline style attributes, and text over photographs cannot be computed.

Who it is for

  • Designers
  • Developers

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 css_contrast_pairs. 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/css-contrast-pairs -H 'content-type: application/json' -d '{"css":":root{--paper:#faf5ea;--ink:#1a1814;--mute:#8f8a80;--gold:#c79a55}\n@media (prefers-color-scheme: dark){:root{--paper:#0e0e0e;--ink:#f2f0eb;--mute:#8c8c8c}}\nbody{background:var(--paper);color:var(--ink)}\n.kicker{color:var(--mute);font-size:14px}\n.card{background:var(--ink)}\n.card .dim{color:var(--gold);font-size:13px}"}'

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 colour and contrast

All colour and contrast tools