Flint Foundations
Data visualization
Five categorical colors for charts, each clearing 3:1 against the surfaces charts sit on, in both modes.
Categorical colors
Use them in order. They map to shadcn's --chart-1 through --chart-5.
| Token | Light | On default (light) | Dark | On default (dark) |
|---|---|---|---|---|
--color-chart-1 | #1a5fa8color.blue.600 | 6.47:1 Pass | #60a5facolor.blue.400 | 6.80:1 Pass |
--color-chart-2 | #b45309color.amber.700 | 5.02:1 Pass | #fbbf24color.amber.400 | 10.36:1 Pass |
--color-chart-3 | #7c3aedcolor.violet.600 | 5.70:1 Pass | #a78bfacolor.violet.400 | 6.36:1 Pass |
--color-chart-4 | #15803dcolor.green.700 | 5.02:1 Pass | #4ade80color.green.400 | 9.93:1 Pass |
--color-chart-5 | #dc2626color.red.600 | 4.83:1 Pass | #f87171color.red.400 | 6.25:1 Pass |
Rules
- Never let color carry meaning alone. Label series directly, or pair color with a pattern or marker shape.
- Keep to five series or fewer. More than that, group the rest or use small multiples.
- Give every chart a text summary of what it shows, for screen readers and for a quick read.
- Chart colors 1 and 5 are blue and red, and 4 is green: never rely on red against green to tell two series apart.