Tools / Contrast

Contrast Free

WCAG 2.2 ratios for text and UI pairs, APCA lightness contrast, the nearest colour that passes, and a colour-blind check that finds palette colours which merge under protanopia, deuteranopia and tritanopia.

MCP tool name: check_contrast. REST: POST /api/contrast. Free: 60 runs a day per IP. Pro: no cap.

Ask for it in plain words

Check the contrast of #8a8a8a on white at 16px, and suggest a colour that passes.

Check colour contrast. Give fg and bg, or pairs (a list of {fg, bg, label, sizePx, bold}), or a palette. Returns the WCAG 2.2 ratio with AA and AAA results for the text size, APCA Lc with what it is enough for, the nearest passing colour, and for palettes the colour pairs that become indistinguishable under protanopia, deuteranopia or tritanopia. Accepts hex, rgb(), hsl() and CSS names.

Inputs

Name	Type	Meaning
`fg`	string	Foreground colour
`bg`	string	Background colour
`sizePx`	number	Text size in CSS px, default 16
`bold`	boolean	True if the text is bold, which changes the large-text threshold
`pairs`	array	Several pairs at once
`palette`	array	Colours to test against white, black and each other under colour blindness

* required

Example

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"}'

Example output

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

#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 it looks like

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

Limits of this tool

WCAG 2 ratios are the conformance test; APCA is shown as guidance. Text over images and gradients needs a manual check, and translucent backgrounds are measured over white.