Color is one of the most powerful tools a designer has: it draws attention, groups elements and communicates states such as error, success or warning. That is exactly why it is risky to let color carry information on its own. A non-negligible share of the population, especially men, has some form of color vision deficiency, and for these people an interface based only on red and green can turn into a guessing game.
The most common forms
The term «color blindness» is used broadly to cover several conditions:
- deuteranomaly and deuteranopia: reduced or absent sensitivity to green; these are the most widespread forms;
- protanomaly and protanopia: reduced or absent sensitivity to red, with reds also appearing darker;
- tritanomaly and tritanopia: difficulty with blue and yellow, much rarer;
- achromatopsia: vision almost without color, very rare.
In the most common forms, the main confusion involves red, green, brown and orange, especially at similar brightness. The classic traffic light «red = error, green = all good» is therefore precisely the most problematic combination.
The basic rule: never color alone
The WCAG guidelines state it in a level A criterion: color must not be the only visual means of conveying information, indicating an action or distinguishing an element. In practice, every color difference should be paired with at least one other cue.
| Situation | Color only | With a redundant cue |
|---|---|---|
| Field with an error | Red border | Red border, icon and text message |
| Link in text | Blue text | Blue and underlined text |
| Order status | Green or red dot | Dot with a «Shipped» or «Cancelled» label |
| Chart lines | Lines in different colors | Different colors, dash patterns and direct labels |
Redundancy does not only help people with color blindness: it helps anyone looking at a screen in sunlight, printing in black and white, or using a poorly calibrated monitor.
Luminance contrast
Two colors very different in hue can have almost identical brightness and be indistinguishable to someone who cannot perceive the hue difference. That is why luminance contrast matters, measured by WCAG as a ratio: for normal text the AA minimum is 4.5:1, for large text 3:1. Interface components and graphical elements needed to understand the content, such as a field border or icons, also require at least 3:1 against adjacent colors.
A simple trick to check whether a palette holds up is to convert it to greyscale: if two states become the same grey, you need other cues or colors with more distant brightness.
Charts and data visualization
Charts are the most delicate ground. Some effective practices:
- direct labels: write the series name next to the line, rather than relying on a color legend;
- color-blind-friendly palettes: there are combinations designed to stay distinguishable in the most common forms, often based on blue and orange rather than red and green;
- vary brightness too: in a sequential scale, color should go from light to dark, not just change hue;
- shapes and patterns: different markers for points, dashes for lines, textures for areas;
- limit categories: beyond six or seven distinct colors, even people with typical vision struggle.
Interactive states
Active and disabled buttons, selected tabs, current menu items: here too color alone is not enough. A selected tab can have a bar under its title or a different text weight; a disabled button can also change shape or show a text hint explaining why it is unavailable.
How to check
- The developer tools of the major browsers can simulate different forms of color vision deficiency directly on the page.
- There are extensions and plugins for design software that preview the palette under various conditions.
- The greyscale test remains the quickest check.
- Nothing replaces feedback from real color-blind people, perhaps involved in a usability test.
In short
- Color must never be the only way to communicate information.
- Red and green at similar brightness are the most problematic combination.
- Luminance contrast matters as much as hue difference.
- In charts, direct labels, shapes and suitable palettes make data readable for everyone.
