A course-registration dashboard draws enrolled students as a green line and waitlisted students as a red line, and color-blind staff cannot tell them apart. How do you fix the palette?
answer
- the most common deficiency
- hue collapses, lightness survives
- an axis that stays apart
- simulate every type plus grayscale
- fix it once in the shared palette
basics
~20 sReplace the red-green pair with hues that also differ clearly in lightness, such as dark blue and light orange, verify the set under color-vision-deficiency simulations and grayscale, and add direct labels or dash styles so color is not the only cue.
solid answer
~50 sRed-green confusion is the most common color-vision deficiency, and a red and a green of similar lightness collapse into two near-identical muddy tones for those readers. The fix separates the pair on axes that survive. Pick hues along a **blue-to-orange** axis, which the common red-green deficiencies largely preserve, and — more importantly — give the two lines a clear **lightness difference**, which survives every deficiency and grayscale printing. Then verify rather than trust: run the palette through simulations of protanopia, deuteranopia and tritanopia plus a grayscale check, at the real line width. Add a redundant cue, such as a direct label at the end of each line or solid versus dashed strokes, because WCAG 1.4.1 Use of Color (Level A) requires that color not be the only visual means of conveying information. Finally, fix the shared chart palette so every team inherits the safe pair.
go deeper
Recall that red-green confusion is the most common color-vision deficiency, and that lightness differences and labels keep series readable.
Explain why hue-only differences collapse under simulation while lightness differences survive, and how to test with several simulations and grayscale.
Demonstrate diagnosing the failing pair, choosing a robust replacement, adding a redundant cue and fixing the shared palette so every product inherits it.
Discuss making color-vision-deficiency checks a release gate for the system's chart palettes, and how firmly to hold when brand colors conflict with safety.
## Why red and green fail **Color-vision deficiency (CVD)** is a reduced ability to tell certain hues apart. Commonly cited figures put the red-green forms near 8 percent of men and 0.5 percent of women of northern European descent, so on a staff dashboard used by a few hundred people, several readers are affected. The main types differ in which hues they confuse: | Type | What weakens | Pairs that tend to collapse | |---|---|---| | **Protan** (protanopia, protanomaly) | Red sensitivity | Red with green, brown and dark gray; reds look darker | | **Deutan** (deuteranopia, deuteranomaly) | Green sensitivity | Red with green, brown and orange | | **Tritan** (tritanopia, rarer) | Blue sensitivity | Blue with green, yellow with light pink or gray | | **Achromatopsia** (very rare) | Almost all hue | Everything except lightness | A green line and a red line of similar lightness fall squarely on the protan and deutan confusion lines, so those readers see two lines of nearly the same muddy tone. A legend does not help: matching a legend swatch to a line needs exactly the discrimination the reader lacks. ## Diagnose before redesigning 1. **Simulate each type.** Run the chart through protanopia, deuteranopia and tritanopia simulations; passing one says nothing about the others, because each collapses different pairs. 2. **Check grayscale.** Printing and some displays remove hue entirely; if the series merge in grayscale, only lightness is missing. 3. **Check at real size.** Thin lines and small points need a bigger difference than swatches in a palette document. 4. **Check against the background.** Each series must also stand out from the chart background; WCAG 2.2's 1.4.11 Non-text Contrast asks 3:1 for graphical objects needed to understand the content, a separate check owned by contrast auditing. In the portal's case, a deuteranopia simulation shows the two lines as nearly the same olive tone, and the grayscale check shows them at almost the same gray. The pair differs in hue only, and hue is exactly the channel these readers lose; that is the root cause to fix, not the particular shades. ## Fix the palette - **Lightness first.** A clear lightness gap between the two series survives every deficiency and grayscale; it is the single most robust property. - **Choose a surviving hue axis.** The common red-green deficiencies keep the blue-yellow channel largely intact, so pairs like **dark blue and light orange** stay apart for them; the lightness gap then covers tritan readers and grayscale. - **Avoid known confusion sets** at similar lightness: red, green, brown and orange together; blue with purple; teal with green. - **Do not rely on saturation.** Making a red and a green brighter does not restore a hue difference the reader cannot perceive. - **Use fewer colors.** Every added series is another pair that must survive simulation. - **Test adjacent pairs, not swatches in isolation.** Two colors that pass side by side in a palette document can still merge where thin lines cross, so check them in the actual chart. ## Add a redundant cue No palette is safe for every reader in every condition, so the chart should not depend on color alone to identify series. For two lines, the cheapest cues are a **direct label** at the end of each line and a **solid versus dashed** stroke. This also meets WCAG 1.4.1 Use of Color (Level A): color is not the only visual means of conveying which line is which. ## Drop the borrowed meaning Red and green also carry status connotations in most interfaces — error and success. Waitlisted is not an error, and enrolled is not a success state in the interface sense, so the original pair also told readers something untrue. Chart palettes work best when they are kept separate from status colors unless the data genuinely is good versus bad. ## Fix it once in the system If one team chose red and green, others will too. The durable fix is at the design-system level: - Publish a tested categorical order whose first colors are safe as adjacent pairs, so the default two-series chart is already safe. - Document which colors may sit next to each other and which may not. - Make chart components apply direct labels or dash styles by default for small series counts. - Run a CVD simulation and grayscale check on any palette change before release. Native mobile charts, web dashboards and exported reports then inherit the same safe pair, instead of each platform team rediscovering the problem.
- Why does blue and orange survive where red and green fail?The common red-green deficiencies weaken the channel that separates red from green but largely keep the channel that separates blue from yellow. Blue and orange sit on that preserved axis, so they stay apart. A lightness gap between them also covers the rarer blue-yellow deficiency and grayscale.
- Does a direct label on each line make the line colors irrelevant?No. Labels remove the dependence on color for identifying which line is which, but readers still have to follow each line across the chart, where they cross and weave. The lines still need to differ visibly from each other and stand out from the background.
- How do you keep the fix from regressing when teams add series?Put the tested palette and its assignment order into the system's chart defaults, document which colors may be adjacent, and run a simulation and grayscale check on any palette addition before release, so teams inherit safe pairs instead of choosing their own.
saying these in an interview costs you the question
- Increasing saturation makes a red and green pair safe for color-blind readers.
- A legend fixes color confusion because readers can look up each series.
- Passing one color-blindness simulation proves the palette is safe for everyone.
- Color-vision deficiency is rare enough to ignore on internal dashboards.
- Hues far apart on the color wheel are always distinguishable to color-blind readers.