Online Tool Store
· 4 min read
How to Fix a Palette That Fails Colour Blind Tests
Manesh Jayawardhana
CIO & Co-founder
The dashboard uses green for good and red for bad. It reads instantly, everyone on the team understands it, and for a meaningful share of viewers the two series are the same muddy brown.
Red-green deficiency is the common one, and green-for-good red-for-bad is the most common encoding in business software.
Lightness is the channel that always survives
Colours differ in three ways: hue, saturation and lightness. Colour vision deficiency compresses hue discrimination, leaves saturation partly intact, and does not affect lightness at all.
That gives a rule that solves most palette problems: if two colours differ in lightness, they stay distinguishable under every deficiency. If they differ only in hue, they can collapse into each other.
It has a second benefit. A palette separated by lightness also survives greyscale printing, screenshots pasted into documents, and low-quality projection — all of which flatten hue and none of which anybody tests for.
So the fix for a colliding pair is rarely a different hue. It is the same hues at different lightness.
Which deficiencies to test
Deuteranomaly and deuteranopia affect green perception and are the most common forms. A palette that works under deuteranopia usually works generally.
Protanopia affects red perception, and red appears darker as well as shifted. Palettes relying on red as a bright accent fail here specifically.
Tritanopia affects blue and yellow discrimination. It is much rarer, and worth checking for palettes built on a blue-yellow axis.
Monochromacy is rarest of all, and a lightness-separated palette handles it by construction.
| Pair | Under deuteranopia |
|---|---|
| Bright green / bright red, same lightness | Indistinguishable |
| Dark green / light red | Distinguishable |
| Blue / orange | Distinguishable |
| Green / brown, same lightness | Indistinguishable |
Colour should never be the only channel
Even a perfect palette leaves a chart harder to read for some viewers than others. The fix is not a better palette; it is not relying on colour alone.
Direct labels on chart series remove the need to match a legend colour to a line at all, and they are better for everyone.
Patterns or dash styles distinguish series independently of colour.
Icons or symbols alongside status colours mean a red badge is not the only signal something failed.
Web accessibility guidance is explicit that colour must not be the sole means of conveying information, and the practical reason is that colour is the channel most likely to be degraded — by vision, by printing, by a projector, or by a screenshot in a chat window.
Order the palette deliberately
Which colour goes to which series matters as much as the palette itself.
Charting software assigns colours in the order series appear, which means the most important series frequently gets whatever colour happened to be first. On a line chart with six series, the two that need distinguishing most may end up adjacent in the palette and therefore closest in hue.
Assigning deliberately fixes it: give the two most-compared series the largest lightness difference available, and let the less important ones take the remaining colours.
The same applies to semantic colours. If green means good in your interface, it should mean good in every chart, and a palette assigned in series order will not respect that unless you make it.
Common mistakes to avoid
- Fixing a palette by shifting hues while keeping the same lightness.
- Testing only deuteranopia and shipping a palette that fails for protanopia.
- Using red and green as the primary status encoding with no secondary signal.
- Checking the palette in isolation rather than on the actual chart, where line weight and adjacency matter.
- Assuming a palette labelled colourblind-safe works in your context without testing it.
How to do it with Color Blindness Palette Fixer
The Color Blindness Palette Fixer simulates each deficiency and suggests separations.
- Paste the palette as hex values.
- Simulate each deficiency type, starting with deuteranopia.
- Apply the suggested adjustment — usually a lightness change rather than a hue change.
- Add labels or patterns so colour is not carrying the meaning on its own.
The WCAG guidance on use of colour sets out the requirement. Other colour tools are in the tools directory.
Frequently asked questions
Which deficiency should I design for?
Deuteranomaly and deuteranopia are the most common and affect red-green discrimination. A palette surviving those usually survives protanopia; tritan deficiencies are much rarer but affect blue-yellow pairs.
Why adjust lightness rather than hue?
Because lightness difference survives every form of colour vision deficiency, and greyscale printing as well. Two colours differing only in hue can become identical; two differing in lightness cannot.
Is a good palette enough?
No. Colour should be a secondary channel. Direct labels, patterns and symbols carry the information for viewers who cannot separate the colours, however well the palette is chosen.
Final thought
Separate by lightness and label the series. A palette that works in greyscale works for everyone, and it is the same fix.