Security dashboards used color inconsistently — critical alerts blended into the noise.
100% WCAG AA compliance; +30% analyst satisfaction in post-launch survey.
Lead UX Designer — accessibility audit, token system, A/B testing.
Color alone fails without hierarchy. Accessibility is a performance requirement.
At Netenrich, our security dashboards relied on a colour palette that had grown organically over time — muddy, inconsistent, and failing basic accessibility checks. The initial brief was simple: "update the chart colours."
I reframed the scope from a cosmetic refresh to a strategic initiative: ship an accessible, modern, tokenised colour palette that would unify every module, pass AA compliance, and work for users with colour vision deficiencies. This reframing unlocked executive buy-in and expanded the project into a full interaction-enhancement effort.
Through auditing existing dashboards and interviewing analysts, two core problems emerged that were undermining trust in the data visualisations.
Similar colours caused visual clutter in dense data visualisations. Analysts struggled to differentiate between adjacent chart segments, leading to misreadings and slower decision-making during incident triage.
Different modules used different palettes with no unified system. A bar chart in one dashboard used completely different hues than a pie chart in another, breaking visual continuity and eroding user confidence.
"I can tell you the shape of the chart. I cannot always tell you which line is which. After an hour on this screen, the colours blur into each other." — Security analyst, interview session 2
Original dashboard as shipped — muddy, similar-hue colours across all chart types. Analysts were misreading segments during incident triage.
Color Report — hue clustering analysis. 7 of 12 original colours fall in the same purple-blue-pink family, impossible to tell apart at small sizes.
Pie chart — live example of the problem. Segments near-indistinguishable under normal vision, far worse under CVD.
The initial brief from product was narrow: swap the chart colours, done. Two weeks, no user research required.
I pushed back. Not because I wanted a bigger project — because swapping colours without a palette system would put us in the same position in 18 months. A new module would ship with a new palette. Another module would drift. The inconsistency wasn't cosmetic; it was structural.
Getting buy-in for a broader scope required reframing the ask: not "better colours" but "a tokenised palette system that every module inherits and that passes WCAG AA compliance." That framing connected to risk (legal accessibility requirements), to engineering cost (one system vs. twelve), and to user trust (data that looks unreliable, is treated as unreliable).
The pushback took two weeks to resolve. It was worth it.
I explored two distinct approaches to palette creation — algorithmic generation using tools like Coblis, Colorlogical, and Adobe Color, versus manual crafting informed by colour theory and domain expertise.
Original palette contrast audit — red-boxed values (1.97:1) far below the WCAG AA minimum of 3:1 for graphical elements.
Extended audit of colour variants — failure rates above 40% across the tested range, confirming a systemic issue not an isolated one.
Iteration 3 — reduced hue clustering, improved perceptual separation. Contrast ratios trending above 3:1 across the majority.
Iteration 4 — balancing saturation depth and hue distance. Approaching a palette that works both analytically and visually.
Each candidate palette was simulated across 8 colour vision deficiency types — from common anomalous trichromacy to rare blue-cone monochromacy. We tested two manual palettes in full before making the final selection.
Manual Palette 1 — CVD simulation across 5 vision types. Hue separation is maintained across Deuteranomaly and Protanomaly (the two most common deficiencies).
Manual Palette 2 — alternative candidate. Stronger teal-range separation but showed blue-purple collapse under Deuteranopia conditions.
Full 8-condition CVD simulation grid — Anomalous Trichromacy, Dichromatic (Red-Blind, Green-Blind, Blue-Blind), and Monochromatic views. The final palette holds readable differentiation across all conditions.
Extended CVD grid — all three deficiency categories side by side: Anomalous Trichromacy (Red/Green/Blue-Weak), Dichromatic (Red/Green/Blue-Blind), and Monochromatic. The palette retains usable hue separation across every simulated condition.
Original dashboard — overlapping hues across line, bar and donut charts. Multiple segments fail to differentiate at a glance.
Redesigned dashboard — perceptually distinct colours with clear hue families. Every chart readable at a glance, including under CVD.
Eight carefully tested colours that maintain perceptual distinction across normal vision and the most common colour vision deficiencies.
The final deployed palette — 10 perceptually distinct colours, WCAG AA contrast compliance, and meaningful hue separation across the most common CVD conditions.
Beyond the palette, we introduced several interaction-level improvements to make charts more accessible and data more actionable.
Whitespace dividers between adjacent bars/slices/lines to aid separation.
On hover tool tips with color indicators to identify the value easily.
The CVD analysis pointed to a technically valid neutral palette: desaturated mid-tones with consistent hue spacing, no warm bias. The contrast ratios were solid. The CVD simulations passed.
I chose the warmer palette instead. Here's the reasoning:
Technically correct. CVD-safe. Consistent contrast. But in A/B testing, analysts described it as "clinical," "cold," and "harder to read after an hour." Long-shift use exposed what the CVD audit couldn't measure: fatigue.
Analysts used the words "easier to scan" and "less noise" without prompting. The warmth reduced perceived visual fatigue on 8-hour shifts. CVD performance held across Deuteranomaly and Protanomaly — the two most prevalent types. The palette is less strictly neutral, but more usable in the real environment analysts work in.
The lesson: a palette optimised for a simulation booth and a palette optimised for an 8-hour analyst shift are not the same thing. The right answer came from watching people use the system under realistic conditions, not from the audit spreadsheet alone.
We ran A/B tests across two analyst cohorts — one using the legacy grey palette, one using our new warm, high-contrast palette — across a two-week period of live dashboard use.