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
| Free | 25 runs a day per IP address. |
|---|---|
| Pro | No daily limit, 300 requests a minute. |
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
- Tracking plan
Check a product analytics event list for naming drift, vague events and personal data in properties.
- Chart honesty check
Check a chart spec for misleading design, with the lie factor worked out when the baseline is truncated
- Chart chooser
Pick a chart type from the question you are asking and the shape of your data, with types to avoid
- Table or chart
Decide whether your data should be a table, small multiples, a sparkline or a chart
- Number format check
Audit how numbers are displayed for mixed decimals, separators, suffixes and rounding that breaks a total