What color vision differences are
Most people perceive color through three kinds of light-sensitive cells in the eye, each most responsive to a different part of the spectrum. Color blindness, more precisely called color vision deficiency, usually means one of those cell types works differently or is missing. Most people with it can see color, but certain hues are harder to tell apart. Complete absence of color vision is rare.
The most common forms affect red and green. People with these forms may confuse reds, greens, browns and oranges, especially when the colors are similar in lightness. Less common forms affect blues and yellows. Estimates differ by population, but red-green differences are often cited as affecting roughly 1 in 12 men and far fewer women, because the common genetic causes are linked to the X chromosome. Even a small share of an audience is a lot of real people, and plenty of them will not know they see differently until a design trips them up.
It is worth remembering that the experience varies. Two people with the same type can have mild or strong differences, and a simulation is an approximation, not a perfect picture of any one person’s vision.
Where designs go wrong
Problems tend to show up where color is carrying information alone:
- A chart with red and green lines to show good and bad results.
- A map legend using several similar mid-tone hues.
- A form that marks required or invalid fields only with a red outline.
- A status indicator that is a colored dot with no label.
- A weather or traffic display relying purely on a red-to-green scale.
In each case, the person can see something is there but cannot tell which category it belongs to.
Principle one: add a second cue
The most reliable fix is to never make color the only signal. Pair it with something else:
- Labels. Write “Error” or “Complete” in words.
- Icons and shapes. A check mark, an exclamation point, a triangle versus a circle.
- Patterns and textures. Hatching, dots and stripes in chart fills and map regions.
- Line styles. Solid, dashed and dotted lines on line charts.
- Direct labeling. Place series names next to the lines or bars instead of in a separate legend that requires matching colors.
- Position. Consistent placement can tell users which item is which.
These additions rarely hurt the design for anyone. Direct labels, for example, often make a chart faster to read for everyone. Good data visualization practice leans on them anyway.
Principle two: vary lightness, not just hue
Two colors that look different to most people may be nearly identical to someone with a color vision difference if they share similar lightness. Lightness, meaning how dark or light a color is, is generally perceived consistently across types of color vision. So build palettes where the colors differ noticeably in lightness as well as hue.
A handy check is to convert the design to grayscale. If two meaningful colors become indistinguishable gray patches, they need more separation. This ties directly to the idea of color contrast, which matters both for text and for telling graphic elements apart.
Principle three: choose safer combinations
No combination is perfect for everyone, but some are safer than others.
- Avoid red against green as the sole distinction, especially at similar lightness. Also be cautious with green against brown, and with blue against purple, where blue-leaning purples can look like plain blue.
- Blue and orange is a popular pairing for two-category contrasts because most common types of color blindness still tell them apart well.
- Light versus dark of one hue works for ordered data, such as a sequence from pale blue to deep blue.
- Limit the count. The more categories you encode with color, the harder it becomes. If you need more than five or six, add labels or reconsider the chart.
Many designers use ready-made palettes created for color-blind-friendly charts. These are typically described as such in their documentation. Use them as a starting point, then test them in your actual design.
Building a palette with this in mind
When working through a color palette step by step, you can fold in these checks early:
- Choose your main hues for brand or mood reasons.
- Check lightness steps in grayscale to make sure key colors separate.
- Identify every place where color encodes meaning, such as success, warning, selected and disabled.
- Add a non-color cue to each.
- Test text pairings for sufficient contrast.
Established color theory is still useful here, since complementary and analogous ideas describe hue relationships, but remember that hue relationships can shift or collapse for some viewers. Lightness and saturation differences are more dependable.
Testing your work
- Grayscale view. The simplest test, available in nearly any tool.
- Simulation tools. Many design tools and browser developer tools can preview how a design looks under common types of color vision deficiency. Treat the results as guidance, not proof.
- Real people. If you can ask someone with a color vision difference to look at the work, their feedback is more informative than any simulation. Be careful not to assume that one person speaks for everyone.
- Print checks. Printed colors can shift, and grayscale printing removes hue altogether.
Don’t forget the interface details
Links in body text are easier to find when underlined. Selected states in menus or tabs can use a bar, a bold weight or a check mark besides a color change. Graphs that highlight one series can make the others gray and the highlighted one both darker and thicker. Heat maps and gauges benefit from a single-hue gradient or from numbers printed on the cells.
A brief note on brand colors
Brand colors cannot always change, and they should not have to. The usual solution is to keep the brand palette for identity and mood while ensuring that functional signals like errors and links get extra support. This keeps recognition and usability both intact. It is one of the quiet advantages of strong brand colors paired with a clear system for interface states.
Keep expectations realistic
Designing for color vision differences is not about removing color. Color still creates mood, hierarchy and recognition. The goal is simply that nothing important depends on color alone. Build in redundancy, test with a few simple methods, and the result is usually a clearer design for everyone.