Designers
ToolsDocsProAll the Possibles

All 141 tools / Colour and contrast

Find which text and UI colour pairs fail WCAG contrast and get the nearest colour that passes.

ContrastFreeFor designers and developers

10 min

saved on a typical run. Our estimate, against checking each pair in a contrast app and hunting for a passing shade by hand.

Before: what you give it

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

fg: #8a8a8a
bg: #ffffff
sizePx: 16
palette: #d62828 #2a9d3f #1d70b8 #f4b400

After: what comes back

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

#8a8a8a on #ffffff  3.45:1  AA FAIL  (normal text)  APCA Lc 62.1
   APCA: enough for 24px regular or 16px bold; too low for body copy
   nearest passing: #767676 (4.54:1)

Palette (contrast of each colour on white and on black):
  #d62828  5.01:1 on white, 4.19:1 on black
  #2a9d3f  3.5:1 on white, 5.99:1 on black
  #1d70b8  5.17:1 on white, 4.06:1 on black
  #f4b400  1.85:1 on white, 11.38:1 on black
No pair merges under protanopia, deuteranopia or tritanopia at the thresholds used.

WCAG 2.2: 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) at AA; 7:1 and 4.5:1 at AAA; 3:1 for UI components and graphics (1.4.11). APCA is the WCAG 3 candidate and is shown for guidance; WCAG 2 ratios remain the conformance test.

What you get

Per pair: WCAG ratio, pass or fail, APCA Lc, a passing colour; plus palette merges for colour-blind users

What it cannot do

Takes up to 100 pairs and a palette of 24 colours; it checks colour values, not how the colours sit on a rendered page.

Who it is for

  • Designers
  • Developers

Free and Pro

Free60 runs a day per IP address.
ProNo daily limit, 300 requests a minute.

What each plan includes

Use it from your assistant

The tool is called check_contrast. 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/contrast -H 'content-type: application/json' -d '{"fg":"#8a8a8a","bg":"#ffffff","sizePx":16,"palette":"#d62828 #2a9d3f #1d70b8 #f4b400"}'

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