Heart Data Viz Color Palette
A categorical and semantic color system for GoFundMe and GoFundMe Pro charts, designed so series stay distinguishable under common visual disabilities.
Overview
The data visualization palette is a focused subset of the Heart design system color tokens. It is meant for charts and dashboards: eight categorical colors applied in a fixed order, plus green and red semantic colors for positive and negative performance.
Accessibility is not treated as a contrast checklist after the fact. The sequence itself is the accessibility design: neighboring colors differ in hue and lightness so they still separate when color vision is impaired.
Principles
- Strict sequence. Categorical colors are applied 1→8 in order. Random swatch picking breaks the luminance rhythm.
- Luminance as a backup channel. Bright Yellow 400 and dark Purple 900 anchor the mid-sequence so categories still read when hue collapses.
- Semantic ± is not hue-only. Green 600 and Red 700 also differ in lightness, so positive/negative stays separable under red-green color blindness.
See it across visual disabilities
Use the simulations below to compare typical vision with protanopia, deuteranopia, tritanopia, and luminance-only viewing.
Vision simulations
Typical vision
No simulation
Semantic
Adjacent-pair separation
Higher ΔE means neighbors stay more distinct after simulation. ΔL is relative luminance difference in percentage points.
| Step | Pair | ΔE | ΔL % |
|---|---|---|---|
| 1 → 2 | Green 600 → Blue 700 | 95.4 | +10.3 |
| 2 → 3 | Blue 700 → Purple 700 | 53.8 | -0.2 |
| 3 → 4 | Purple 700 → Yellow 400 | 128.3 | -55.4 |
| 4 → 5 | Yellow 400 → Blue 500 | 77.4 | +24.2 |
| 5 → 6 | Blue 500 → Pumpkin Spice 500 | 102.5 | +7.9 |
| 6 → 7 | Pumpkin Spice 500 → Purple 900 | 115.4 | +33.7 |
| 7 → 8 | Purple 900 → Pink 600 | 46.8 | -20.6 |
Simulation uses Machado, Oliveira & Fernandes (2009) matrices. Distances are CIE Lab ΔE. Palette from the Heart Design System token library.
What to take away
Under typical vision, every adjacent pair in the sequence is strongly separated (minimum ΔE around 47). Under protanopia and tritanopia, most neighbors stay clearly distinct. The soft spot is Blue 700 next to Purple 700 for deuteranopia, still workable when the full sequence and labels are used.
The design holds up because separation is built into the sequence: a light-dark rhythm across categorical colors, and semantic green/red that differ in lightness as well as hue.