Designing for colour blindness: never let colour carry the meaning alone
The rule that covers almost everything: colour can decorate and reinforce, but it can't be the only way a page says something. Pair every colour cue with text, an icon, a pattern or a change in shape, keep enough lightness contrast between colours that sit side by side, and check the result with a colour-vision simulator before you publish.
What colour blindness changes
Colour vision deficiency isn't usually seeing in grey. Most people with it see colour, but some pairs collapse into one. The common forms reduce sensitivity to red or green light, which makes reds, greens, browns and oranges hard to tell apart; a rarer form affects blue, confusing blues with greens and yellows with pinks; and a very small number of people see no colour at all. Chrome's developer tools can emulate these vision deficiencies, along with blurred vision and reduced contrast, which is the quickest way to see a page the way these readers do.
| Pair | Where it turns up on websites | Safer alternative |
|---|---|---|
| Red and green | Success and error, in-stock and sold-out, up and down in charts | Blue and orange, plus a label or icon |
| Green and brown | Map keys, category tags | Different lightness, or patterns |
| Blue and purple | Visited and unvisited links, chart series | Underline links; label chart lines directly |
| Pink and grey | Disabled versus selected states | Change fill or border weight, not only hue |
| Light green and yellow | Highlight colours, status badges | Darker text labels on a neutral ground |
The rule: colour plus something else
WCAG's Use of Color criterion, at level A, says colour mustn't be the only visual means of conveying information, indicating an action or distinguishing an element. Its own example is a form that marks required fields in red and also with an icon. In practice that means:
- Form errors get a written message next to the field and an icon, not just a red border.
- Required fields say "required" or carry a marker explained above the form.
- Links in text are underlined, not only coloured.
- Selected states change shape, fill or weight: a filled tab, a tick on a chosen option, a thicker border.
- Charts label each line or bar directly, or use different dash patterns and marker shapes, instead of relying on a colour key.
- Stock and availability say "Sold out" in words rather than greying out a price in red.
Building a colour blind safe palette
No palette is safe for everyone in every combination, but some choices make trouble much less likely. Lightness does most of the work: two colours that differ strongly in lightness stay distinguishable even when their hues merge. Pick one action colour and make it clearly darker or lighter than its surroundings. If you need a pair for good and bad, blue and orange survive the common deficiencies far better than green and red.
- Convert the palette to greyscale. Any two colours that become the same grey will be confused by someone.
- Check contrast between neighbouring colours as well as against the background. WCAG's non-text contrast criterion asks for 3:1 for the parts of controls and graphics that people need to see.
- Limit the number of colours that carry meaning. A chart with eight series is hard for everyone; with labels, three or four colours are plenty.
- Keep brand colours for decoration and emphasis, and let words carry status.
Testing a colour blind friendly website
Open the Rendering panel in Chrome's developer tools and switch between protanopia, deuteranopia, tritanopia and achromatopsia. Walk through the pages that carry meaning in colour: forms with errors showing, the pricing table, any chart, the booking calendar, the basket. Ask the same question each time: can I still tell what's selected, what's wrong and what's clickable? Then try the page in greyscale, which most operating systems offer as an accessibility filter. For contrast numbers, see colour contrast for websites.
Colour blind accessibility in Anticode
Each of Anticode's seven design systems uses a single action colour, chosen from red, orange, gold, green, teal, blue, pink or black, against a mostly neutral palette, so colour seldom has to carry meaning on its own. In design-engine pages, a chosen booking time slot becomes a solid block in the text colour rather than just changing hue, standalone text links such as "See prices" keep their underline, and form fields are labelled in words. If a field is invalid, its border turns red and the browser shows its own message when the form is sent.
Your own edits are where problems usually come in: a new action colour, tuned colour tokens, or a status shown only by colour in an app build. Check those with a simulator. If you use red as the action colour, make sure nothing else on the page depends on green looking different from it. For choosing the colour in the first place, see accent colour in web design.
Questions people ask
Should I avoid red and green on my website?
You don't have to avoid them, but never use them as the only difference between two states. Add words or icons, and make one clearly darker than the other.
How do I test for colour blindness without special software?
Chrome's developer tools include vision deficiency emulation in the Rendering panel. A greyscale filter in your operating system is a good second check.
Is there one colour blind safe palette?
No palette works in every combination. Large lightness differences, a small number of meaningful colours and text labels matter more than the exact hues.