Version 0.8.0
Micah's Chart System for Sane and Useful Color Strategies
An interactive builder that solves a categorical chart palette around the brand colors you have to keep, then audits it against WCAG 2.2 non-text contrast, colorblind simulation, and grayscale before you ship it. It also builds sequential and diverging ramps, and pairs every color slot with a dash, a decal, and a marker shape so a chart stays readable when color stops carrying it.
The builder is running on this page. If you are reading this text instead, it has not loaded yet or JavaScript is off.
What it measures
- Contrast. WCAG 2.2 SC 1.4.11 non-text contrast of every slot against the chart background, against a 3:1 floor.
- Color-vision deficiency. Pairwise OKLab ΔE separation under deuteranopia, protanopia, tritanopia, and achromatopsia, using the published Machado (2009) simulation matrices.
- Grayscale. Whether the palette survives when hue is removed entirely, which is also what a fax, a photocopy, and a monochrome print do to it.
- Redundant encoding. A dash pattern, decal fill, and marker shape matched to each slot, so series identity does not depend on color alone.
Where it loses
Past roughly six hues, no categorical palette keeps its colors reliably distinct under dichromacy. This one does not either. Above six slots the solver relaxes its own floors, and it says so in the result rather than returning a palette that looks solved. What the tool does at that point is tell you where the wall is, and hand you the second encoding that gets you past it.
Questions it answers
- How many colors can a chart use before they stop being distinguishable?
- About six. Past roughly six hues no categorical palette keeps its colors reliably distinct under dichromacy, and the published defaults are no exception: at six slots Tableau 10's worst pair collapses to a colorblind ΔE of 0.7, effectively one color drawn twice. Above six slots, series identity has to be carried by a second encoding - dash pattern, decal fill, or marker shape - rather than by color alone.
- What contrast ratio do chart colors need?
- WCAG 2.2 Success Criterion 1.4.11 asks for 3:1 against adjacent colors for graphical objects a reader needs in order to understand the content. Applied to a chart, that covers the marks you must tell apart to read the data. The criterion exempts cases where the specific appearance is essential, so a number below 3:1 is not automatically a conformance failure - but a 2px line at 1.4:1 is a usability failure regardless.
- Is ColorBrewer Set2 colorblind safe?
- Not on its own, and not on every background. Measured at six slots, Set2's minimum pairwise OKLab ΔE is 11.8 under normal vision but drops to 1.5 under the worst of deuteranopia, protanopia and tritanopia. On a white background all eight of its slots fall below the 3:1 non-text contrast floor, its worst (#FFD92F) at 1.38:1. On a dark background (#111827) the same palette passes every slot with a worst case of 6.78:1. Set2 was designed for cartography and print, where marks are large filled regions.
- Does a chart palette need to change between light and dark mode?
- Usually yes, because contrast is separation from the background and the background is the one variable the palette author never had. Measured against the 3:1 floor, the ranking of five common default palettes nearly inverts when the background changes from white to #111827: ColorBrewer Set2 goes from worst to best, and IBM Carbon from the only passing palette to the worst, with five of ten slots failing.
- What is the difference between hue separation and contrast in a chart palette?
- They are different problems with different inputs. Hue separation is the distance between colors in the palette - it keeps slot 3 from reading as slot 7, and it depends only on the palette. Contrast is separation from the background, and it depends on where the chart is drawn. A qualitative palette can be excellent at the first and indifferent to the second.
The same engine, elsewhere
- chart-color-system on npm — the solver and audit as a library. MIT.
- An MCP server at
https://chart-color-mcp.vercel.app/mcp— the same engine as a tool an AI assistant can call, read-only and unauthenticated. - Notes — measured write-ups, with every figure computed by the engine at render time.
- Source on GitHub.