115 laps at Thunderhill
Next case study. A year of my own telemetry, and what I found reviewing my own chart a year later.
Making brand colors work for healthcare data
Healthcare dashboards rarely start with a blank canvas. Clients arrive with an established brand, and those colors tend to reach a dashboard concept at full saturation, which is familiar to the brand and overwhelming for the data. This is the tool I built to work out which version of a brand color a chart can actually carry.
At full strength every chart is loud and every category competes for attention. The answer is not to remove the brand, it is to use it more deliberately. A controlled range of tints reserves the strongest version for highlights and interface, and lets lighter tints carry the visualization.
A typical working range is around 60 / 30 / 10. The percentages are not a hard rule. The point is hierarchy.
The challenge was working out which tints actually held up, and being able to explain why. Instead of "this color is too strong," the conversation becomes "these colors were selected deliberately and tested for accessibility."
Brand color is not a visualization system
A brand palette is designed for recognition. A visualization palette has a different job. A color that works perfectly for a logo or a button can overwhelm a chart once it is repeated across ten data series, and it can create accessibility problems on the way.
The palette had to answer a few practical questions.
- How light can a color go and still work with text on it?
- Can two tints be told apart?
- What happens under each type of color-vision deficiency?
- Does the palette survive greyscale printing?
- How many categorical colors can be used before the system falls apart?
And the one underneath all of them: can the decision be demonstrated rather than debated?
Turning a subjective decision into a measurable one
Color Safety Lens tests a palette before it reaches a dashboard. It checks colors against WCAG contrast requirements and evaluates how they behave together, as a palette rather than as swatches.
Text on any fill
Body-size text checked at every tint. A color that passes at 100% can fail as it lightens.
Adjacent fills
Neighboring fills tested so a boundary reads without an outline holding it together.
Color-vision deficiency
Simulated across protan, deutan and tritan. Not identical appearance, but information that survives.
Series separation
Every pair checked against the others. A set can look fine as swatches and fail in one chart.
100% brand color became the exception
The goal was never to remove the client's brand from the system. It was to give it a job. The strongest version works for high-value emphasis, selected states, key interface, and the moments where the brand has to be recognized immediately. The rest of the system runs on controlled tints.
- 100%
- High-value emphasis and brand moments
- 60%
- Primary visualization
- 30%
- Secondary information
- 10%
- Supporting surfaces and subtle interface
These are a starting point for hierarchy, not rigid percentages. The important part is that a color has a reason for being there, and that the reason can be checked.
The same checks, on your own palette
Everything above is a rule. This is the rule doing its job. Paste in a brand color, ramp it, and the tool reports what passes at each step and what happens to the set under each type of color-vision deficiency.
A palette can look fine until it does not
Color-vision deficiency is not a switch, it is a range, and most people who have one are somewhere in the middle of it. A palette shows the problem quickly once you move through that range: two colors that look clearly different at zero start to converge well before full severity. Palettes built to stay separable, like Okabe and Ito's, hold their distance the whole way.
The goal is not a palette that looks good in a screenshot. The information has to survive when the viewer does not see the colors the way the designer does.
The tool had to fit the design system
A color audit is only useful if designers actually run it. The last step was getting verified colors back into the workflow that already existed. Color Safety Lens exports approved colors as SVG, so they move straight into Figma and the visualization system.
- Brand color
- Test
- Select tints
- Export
- Figma
- Design system
- Dashboard
- Brand color
- Designer picks a color
- Stakeholder questions it
- Accessibility checked later
The accessible option becomes the easy option. That matters, because a standard does not survive if following it creates extra work.
Accessibility became part of the process
Color Safety Lens is used in healthcare dashboard work to check visualization palettes before they reach production. It gives the team four things.
Defend color decisions
Color choices are supported by a measurable accessibility requirement rather than by preference.
Build reusable palettes
Approved tints become part of the Figma visualization system instead of being recreated for every dashboard.
Catch problems earlier
Accessibility issues surface during design rather than after a dashboard is built.
Move directly into Figma
Verified colors export as SVG and drop into the design system.
The tool does not replace design judgment. It gives the judgment evidence.