Never let colour be the only thing conveying information. Add a word, an icon, a pattern or a position, and the meaning survives for everybody including people in bright sunlight.

The numbers

Around one man in twelve has some form of colour vision deficiency, and roughly one woman in two hundred.

For a business with a thousand visitors a month, that is a meaningful number of people every single month.

The most common form makes red and green difficult to distinguish, which is unfortunate, since red and green are the two colours most often used to mean no and yes.

Others struggle with blue and yellow, and a smaller number see no colour at all.

Where this bites

The first is the most consequential on a small business site, because a form that will not submit and does not say why is a lost enquiry.

The rule

Colour may reinforce information and must never be the only thing carrying it.

Which does not mean avoiding colour. It means adding something alongside it.

A word, an icon, a pattern, a shape, a position, or text stating the situation directly.

Red border plus the words this field is required is fine. Red border alone is not.

Green dot plus the word available is fine. Green dot alone is not.

A worked example

A booking system showing availability as a grid of coloured squares: green for free, amber for limited, red for full.

No labels, no text, no legend beyond a coloured key using the same three colours.

A customer phoned to ask which days were available, having been unable to tell, and mentioned that he was colour blind.

The fix was adding a single letter to each square and a text summary beneath, which took an hour.

The business then found that the text summary was used by everybody, including on phones where the grid was small and fiddly regardless of colour vision.

Which is the recurring pattern: the accessible version was better for everyone, and it was only built because one person said something.

Form errors specifically

Worth its own attention, because it is where the money is.

A form that fails validation needs to say, in words, what went wrong and which field.

The message should be near the field, and there should also be a summary at the top for anything longer than a few fields.

Colour, an icon and text together is the reliable combination, and text alone is better than colour alone.

What fails: a red outline and nothing else, an asterisk with no explanation, and a message that appears somewhere the person is not looking.

Links coloured but not underlined

A specific instance worth separating, because it is so widespread.

Within a paragraph, a link distinguished only by colour is invisible to anybody who cannot see the difference between that colour and the surrounding text.

Which means a page can appear to have no links at all, and the visitor concludes the information is not there.

The underline is the reliable indicator, and it is worth keeping in body text even where a designer prefers it removed.

In navigation the position makes the function obvious, so the rule is looser there, and the colour still needs adequate contrast against the background.

Testing without special tools

Easier than it sounds and worth doing on the pages that matter.

Take a screenshot and convert it to greyscale, in any photo tool. Anything that becomes indistinguishable was relying on colour.

Browser developer tools include colour vision simulations that render the page as somebody with each condition would see it.

Both take about a minute per page and give a clear answer rather than a judgement.

The greyscale test is the crude one and it catches most problems, because anything that survives greyscale survives every form of colour deficiency.

The counter-case

Where colour alone is acceptable.

Purely decorative use, where nothing is being communicated: a background, a border, a brand accent.

Where the colour reinforces information that is already stated clearly elsewhere and is genuinely redundant.

And where a convention is so strong and the context so constrained that the meaning is unambiguous, though this is worth being sceptical about, since designers overestimate how obvious their conventions are.

The test is whether somebody seeing the page in greyscale would lose anything. If not, the colour is decoration and there is no issue.

Choosing a palette that works

Easier at the start than as a retrofit, and worth raising when commissioning anything.

Pick colours that differ in lightness as well as hue, since a difference in lightness survives every form of colour deficiency and every greyscale printer.

A dark red and a light green are distinguishable to almost everybody. A mid red and a mid green of similar lightness are not.

Which means a palette can keep its red and green and still work, provided the two are not the same tonal weight.

Blue and orange is a pairing that survives most conditions and is worth knowing about when a design needs two clearly distinct signals.

None of this constrains a brand very much. It constrains only which two colours sit next to each other carrying different meanings at the same time.

Contrast is a separate question

Worth distinguishing, since the two get confused.

Colour vision deficiency is about telling hues apart. Contrast is about the difference in lightness between text and background.

A page can have perfect contrast and still rely on colour to carry meaning, and it can use colour appropriately while being illegibly low contrast.

Both need checking and they need different tests: greyscale or simulation for the first, a contrast ratio measurement for the second.

A page that passes both tests is readable by almost everybody, and the two together take about five minutes to verify properly.

What to check

  1. Convert your key pages to greyscale.
  2. Look for anything that became ambiguous.
  3. Submit your form incorrectly and read the errors.
  4. Check any status or availability display.
  5. Check charts have labels rather than a colour key.
  6. Underline links in body text.

The third is the one worth doing first, since a form somebody cannot correct is a lost enquiry rather than an inconvenience.

The related question of legibility is covered in text somebody can read without zooming.

Frequently asked questions

How many people does this affect?

Around one man in twelve and one woman in two hundred. For a site with a thousand monthly visitors that is a meaningful number every month.

Which colours are the problem?

Red and green most commonly, which is unfortunate since those are the two colours most often used to mean no and yes.

What is the rule?

Colour may reinforce information but must never be the only thing carrying it. Add a word, an icon, a pattern or a position alongside.

Where does it matter most?

Form errors. A form that will not submit and does not say why, in words, is a lost enquiry rather than an inconvenience.

How do I test it?

Convert a screenshot to greyscale. Anything that becomes indistinguishable was relying on colour. Browser tools also simulate each condition.

Is this the same as contrast?

No. Colour deficiency is about telling hues apart; contrast is about lightness difference. Both need checking and they need different tests.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Form errors marked with a red border and nothing else?

One man in twelve cannot see that. Adding the words costs nothing and recovers the enquiry.

Start a Conversation