Designers

All 141 tools / Charts and data

Check chart series colours for contrast, colour-blind confusion and too many hues against your background

Chart colour checkFreeFor designers and developers

25/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.

colors: ["#d55e00","#009e73","#56b4e9","#f0e442","#cc79a7"]
background: #ffffff
chartType: line

After: what comes back

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

Colour check: 5 colours on #ffffff, line
3 errors.

[ERROR] Colour 3 (#56b4e9) has 2.31:1 against the background #ffffff; graphics need 3:1. The closest passing shade is #229de2.
[ERROR] Colour 4 (#f0e442) has 1.32:1 against the background #ffffff; graphics need 3:1. The closest passing shade is #a1970d.
[ERROR] 4 pairs too close in greyscale (print or low-vision settings). Worst: colours 1 (#d55e00) and 2 (#009e73), difference 4 where 15 is the working minimum for thin marks.
[WARN] 5 series. Past four, a legend forces readers to match colours by memory. Label each line at its right-hand end, and add a second cue (dash style, marker shape, or position) so colour is not the only carrier.

Wong palette colours holding 3:1 on this background: #000000 #009E73 #0072B2 #D55E00 #CC79A7

What you get

Contrast per colour with nearest passing shade, confusable pairs under four vision models, Wong palette fit

What it cannot do

Takes up to 24 colours; the delta E cut-offs of 10 and 15 are working conventions, not standards.

Who it is for

  • Designers
  • Developers

Free and Pro

Free25 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 chart_colour_check. 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/chart-colour-check -H 'content-type: application/json' -d '{"colors":["#d55e00","#009e73","#56b4e9","#f0e442","#cc79a7"],"background":"#ffffff","chartType":"line"}'

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 charts and data

All charts and data tools