Colorblind-safe chart palette - #21
Merged
Merged
Conversation
GusFurtado
force-pushed
the
remove-curated-chips
branch
from
September 12, 2026 00:50
1c46bcb to
2ae9542
Compare
Answering the question directly: outliers-design-system's chart tokens don't actually offer more than this (checked the canonical theme-tokens.css mirror) — chart.seriesA/B/C are teal/navy/cyan (one hue family, varying lightness) plus a neutral "other" and two correlation-heatmap endpoints. That's not an oversight in this app, it's what the design system itself defines, and being brand-derived it was never going to have the hue range this needs — more brand tints would still be teal/navy variants, which is exactly what's hard to tell apart under color vision deficiency (hue is far less reliable than lightness/saturation there). Replaced CHART_PALETTE with a real qualitative palette instead of brand tints: the first 8 colors are Okabe & Ito's colorblind-safe set (Wong, Nature Methods 8, 441 (2011) — the standard reference for categorical color under deuteranopia/protanopia/tritanopia), yellow darkened from their #F0E442 to #B8860B for legibility on our white background, plus 4 more well-separated hues to extend past 8. Every place this palette is used (frontier per-asset dots, allocation donut/table, per-asset statistics) also labels the point with the ticker symbol as text, so color is always a secondary cue, never the only one — which matters once a selection goes past the ~8-10 hues anyone can reliably tell apart by color alone, colorblind or not. Single source of truth (CHART_PALETTE, indexed by position via `CHART_PALETTE[k % CHART_PALETTE.length]`), so this is the only place that needed to change — verified by re-rendering the frontier, allocation and per-asset-statistics sections with a synthetic 10-asset response and confirming every series swatch is now visually distinct. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
GusFurtado
force-pushed
the
colorblind-safe-palette
branch
from
September 12, 2026 00:51
6b69264 to
a7065d9
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
Direct answer to "aren't there extra colors in outliers-design-system?": no — checked the canonical
theme-tokens.cssmirror, andchart.seriesA/B/Care teal/navy/cyan (one hue family, varying mostly in lightness), plus a neutral "other" and two correlation-heatmap endpoints. That's the design system's own definition, not something missed here — and being brand-derived, it was never going to have the hue range this needs. More brand tints would still be teal/navy variants, which is exactly what's hard to distinguish under color vision deficiency (hue matters far less there than lightness/saturation, and this palette varied almost entirely in the latter).What changed
Replaced
CHART_PALETTEwith an actual qualitative palette instead of brand tints:#F0E442to#B8860Bfor legibility on our white background (the original assumes a darker plot background).Every place this palette is used (frontier per-asset dots, allocation donut/table, per-asset statistics) also labels the point with the ticker symbol as text — color is always a secondary cue, never the only one, which matters once a selection goes past the ~8–10 hues anyone can reliably tell apart by color alone.
Single source of truth (
CHART_PALETTE, indexed viaCHART_PALETTE[k % CHART_PALETTE.length]), so this was the only place that needed to change.Verification
Re-rendered the frontier, allocation, and per-asset-statistics sections with a synthetic 10-asset response — every series swatch (dots, donut arcs, table swatches) is now visually distinct, versus the previous palette's mostly-indistinguishable teal/navy/gray shades. Screenshot in this PR's discussion if useful.
🤖 Generated with Claude Code