What color vision differences are
People often say “color blindness,” but in most cases it is not a complete absence of color. It is a difference in how the eye distinguishes certain hues. The most common form makes it harder to tell reds, greens and browns apart. Another, less common form affects blues and yellows. A very small number of people see little or no color at all.
Color vision differences are more common in men than in women, and they are widespread enough that in any sizeable audience you should expect some readers to be affected. Exact figures vary by population, so it is safest to say “a noticeable minority” rather than quote a number. People may also have temporary or situational color problems, such as reading on a dim screen, a screen with the brightness turned down or in strong sunlight.
The core rule: never use color as the only signal
The main principle in accessibility guidance is simple. If color carries meaning, something else should carry it too. Common places this goes wrong:
- Charts. A line chart with a red line and a green line, and a legend that shows only colored squares.
- Status indicators. A green dot for “available” and a red dot for “unavailable” with no text.
- Forms. Required fields marked only by red borders, or errors shown only by red text.
- Links. Links that differ from surrounding text only by color, with no underline or other cue.
- Maps and diagrams. Regions distinguished only by shades.
- Instructions. Phrases such as “click the green button” or “the items in red are overdue.”
In each case, someone who cannot distinguish the hues loses the information, and so does anyone reading a black-and-white printout or a screen reader that does not announce color.
Practical fixes
Add a second cue
Combine color with something else:
- Text labels directly on or beside the item. Labeling lines on a chart at the end of each line is often clearer than using a legend.
- Patterns or textures in bars and areas, such as stripes, dots or crosshatching.
- Shapes and icons, for example a check mark for success and a warning triangle for caution.
- Underlines on links within body text.
- Different line styles, such as solid and dashed.
- Written descriptions that do not mention color, or that mention it together with a position or name: “the button labeled Submit.”
Choose colors with more than hue in mind
People with color vision differences often distinguish lightness more easily than hue. If two colors differ strongly in lightness, one dark and one light, they are more likely to be distinguishable even if the hues look similar. A palette that varies in both hue and lightness is more resilient than one that varies in hue alone.
Pairs that tend to be troublesome include red with green, green with brown, blue with purple, and light green with yellow. Combinations such as dark blue with orange or yellow are often easier to tell apart, though it is always worth testing.
Keep contrast in mind
Text needs enough contrast against its background to be readable by people with low vision, and by many people with color differences too. Common guidelines suggest a contrast ratio of at least 4.5 to 1 for regular body text. A fuller treatment of color contrast covers how to measure it, and some basic color theory helps you understand why lightness differences matter.
Be careful with gradients and heat maps
Rainbow-style color scales are especially difficult. Single-hue scales that run from light to dark are usually easier to read, because the viewer can interpret lightness. If a scale represents data, add labels or values where space allows.
How to test
- Grayscale test. Convert your design or chart to grayscale, or print it in black and white. If you can no longer tell the categories apart or follow the meaning, you are relying on hue alone.
- Simulators. Many design programs and browser features can simulate common color vision differences. They are useful guides, but they are approximations, and real experience varies between individuals.
- Check the text. Read through your copy for statements like “the red line” or “the green section.” Rewrite them so that the sentence still works without color.
- Ask people. If you know readers with color vision differences, ask them to look at your work. They will quickly show you what confuses.
Simple diagrams and charts
When designing simple diagrams, think about which information must be seen, and give each category a distinct label. Fewer categories are easier. If you need more than five or six colors to separate categories, consider whether the chart can be split into several smaller ones instead, which is often clearer for everyone.
A small example
Imagine a hypothetical schedule where classes are shown in green if they have space and red if they are full. A reader with red-green difficulty may see both as similar brownish tones. By adding the words “Open” and “Full” next to each, or an icon, the information is accessible without removing the colors at all. Color then becomes a helpful extra instead of the only carrier of meaning.
Takeaway
Designing for color vision differences does not mean giving up color. It means making sure color is one cue among several. The extra labels and patterns tend to make your work clearer for everyone, including people who read quickly, people on poor screens and people who print.