Chart Palette Contrast Checker
Check every series colour against the chart background, compare adjacent series, and repair failures while preserving hue and saturation where possible.
No account. Nothing stored. Runs in-process with WCAG arithmetic — no AI model call.
A chart palette passes when every series colour clears 3:1 contrast against the chart background, any label text drawn on a series colour clears 4.5:1 for WCAG AA (7:1 for AAA), and each pair of adjacent series colours clears 3:1 against each other. This checker measures all three. Paste 2 to 10 hex colours plus a background — 6 common chart colours are preloaded — and it returns a ratio for every comparison plus a repaired hex value wherever one fails. A 6-colour palette produces 17 measured ratios: 6 against the background, 6 for text on each swatch, and 5 adjacent pairs. Repairs move lightness only, so hue and saturation survive unless a hue runs out of lightness before it reaches the target, in which case the repair falls back to black or white. The corrected palette comes back in 2 copyable formats, CSS custom properties and JSON. It runs in-process with fixed WCAG arithmetic — no account, no AI model call — so the same palette always returns the same numbers.
Add your chart palette
Use 2–10 series colours. 6 common chart colours are loaded as a starting point.
Which contrast ratio applies to which part of a chart
These are the thresholds this checker enforces, taken from WCAG 2.x. They are constants in the checker itself, not editorial guidance, so the numbers on this page and the numbers in your result are always the same.
| What is compared | Target ratio | Why it matters | What the checker does on a fail |
|---|---|---|---|
| Series colour vs chart background | 3:1 | Bars, lines, and slices are non-text graphical objects; below this they blur into the plot area. | Returns a lightness-adjusted replacement hex that clears 3:1. |
| Label text on a series colour (AA) | 4.5:1 | Data labels printed inside a bar or slice are normal-size body text, not graphics. | Returns a corrected text colour that clears 4.5:1 on that swatch. |
| Label text on a series colour (AAA) | 7:1 | The stricter tier some public-sector and accessibility policies require. | Reported as pass or fail only; the automatic repair targets AA, not AAA. |
| Adjacent series colours | 3:1 | Neighbouring segments and stacked bars touch, so they must separate from each other, not just the background. | Returns a replacement for the second colour in the pair, keeping the first as authored. |
| Palette size accepted | 2–10 colours | Below 2 there is no pair to compare; above 10 series identity fails for reasons contrast cannot fix. | Requests outside the range are rejected before any arithmetic runs. |
Chart contrast FAQ
What contrast ratio do chart colours need?
Non-text chart marks — bars, lines, slices, points — need 3:1 against the chart background under WCAG 2.x. Text drawn on top of a series colour is held to the stricter text thresholds: 4.5:1 for AA and 7:1 for AAA at normal size. Adjacent series colours should also clear 3:1 against each other so touching segments stay separable.
How many colours can I check at once?
Between 2 and 10 hex colours per run, plus one background and an optional label-text colour. 6 common chart colours are preloaded so you can see a result immediately. A 6-colour palette yields 17 ratios; a 10-colour palette yields 29.
Why does it check adjacent colours and not just the background?
Because stacked bars, pie slices, and dense line charts put series colours directly against each other. Two colours can each clear 3:1 against a white background and still be almost indistinguishable side by side. The checker measures every consecutive pair in the order you list them, which is the order most charting libraries assign series.
What does the tool change when a colour fails?
It moves lightness toward whichever pole raises contrast and leaves hue and saturation alone, so the repaired colour usually still reads as the same colour family as the one you authored. Failing series colours get a suggested replacement hex, failing label text gets a corrected text colour, and a failing adjacent pair gets a replacement for the second colour so the first stays exactly as designed. One boundary: if a hue runs out of lightness before it reaches the target ratio, the repair falls back to black or white — whichever is higher contrast — and the hue is lost.
In what formats can I take the corrected palette away?
Two: CSS custom properties (a :root block with --chart-background and numbered --chart-color-n variables) and indented JSON with the background and the colour array. Both are copyable with one click and carry a Gixo Prism attribution comment.
Does passing this check mean my chart is colour-blind safe?
No. Contrast ratio is a luminance calculation and does not model colour-vision deficiency — two colours can pass 3:1 and still collapse into each other for a viewer with deuteranopia. Run the palette through the Gixo colour-blind chart simulator as well; it simulates four colour-vision conditions and flags adjacent colours with weak Lab separation.
Do I need an account, and is my palette stored?
No account, no email, no sign-up. The colours are posted to a stateless endpoint that computes the ratios and returns them; nothing is written to a Gixo account or document library. The tool makes no AI model call, so your palette is never sent to a model provider.
Is the checker free, and does Gixo have a free plan?
The checker is free and needs no account, capped only by an anti-abuse rate limit of 15 checks a minute with a burst allowance of 30 and a 16 KB request size limit. Gixo itself has no standing $0 plan — paid products open with a 14-day free trial that needs no card, after which continued generation requires a paid plan. This contrast checker is not part of that boundary; it stays open to anonymous visitors either way. What a Gixo account adds is a saved Brand Kit — a primary, secondary, and accent colour plus your fonts — that Prism applies automatically to charts, diagrams, cards, and visual packs, deriving the chart series palette from your accent colour. Gixo does not store the full corrected palette from this page; copy the CSS or JSON before you leave.
Apply the palette across every future visual
The checker stays free. Save your primary, secondary, and accent colours as a Gixo Brand Kit and Gixo Prism applies them across charts, diagrams, cards, and visual packs, deriving the chart series palette from your accent.
Standards behind this check: document accessibility standards, guides and testing tools.