Contrast ratios are only half of it. The more frequent problem is meaning carried by colour alone, which disappears for people with colour vision deficiency, for anyone in bright light, and for anyone printing the page.

The two separate problems

Contrast is whether text can be distinguished from its background. Measurable, well known, and checkable with a tool.

Colour as information is whether meaning is conveyed by hue alone. Less discussed, more common, and not caught by a contrast checker.

A page can pass every contrast check and still be unusable because the only indication that a field is required is that its label is red.

Who this affects

Colour vision deficiency affects a meaningful proportion of men and a smaller proportion of women, which for a trades or property business is a substantial share of the audience.

Red and green being difficult to distinguish is the most common form, which is unfortunate given how universally those two are used for wrong and right.

The group is larger than that, though. Anyone reading a phone in bright sunlight, anyone on a poorly calibrated screen, anyone printing the page in black and white, and anyone using a screen reader all lose colour-based meaning too.

Where colour-only meaning appears

Form errors and required fields

The most common. A red border, a red asterisk, or a red label with no text saying what is wrong. Somebody who cannot distinguish the red sees a form that will not submit and no explanation.

The fix is text: an asterisk with a legend, and an error message beside the field saying what to change.

Status indicators

Green ticks and red crosses in a comparison table, availability shown as a coloured dot, or a status column relying on background colour.

Adding a word, a symbol with a distinct shape, or both resolves it.

Links inside text

A link distinguished only by being a different colour from the surrounding text. Underlining links within body copy is the reliable fix, and removing underlines is a common design choice that costs exactly this.

Charts and diagrams

A legend matching colours to series, with several similar hues. Direct labels on the lines, distinct patterns, or different line styles all work better.

Required versus optional in pricing tables

Included and excluded shown by cell colour, which becomes an undifferentiated grid for a share of readers.

The pairings to be careful with

That last point is the useful generalisation. Two colours that differ in hue but not in lightness are hard to distinguish for more people than the specific pairings suggest. Varying lightness as well as hue solves most of it.

Focus indicators

A specific case worth naming because it is removed so often.

The outline showing which element is selected when navigating by keyboard is frequently deleted because designers find it unattractive. Without it, anybody not using a mouse cannot tell where they are on the page.

Replacing it with something better-looking is legitimate. Removing it entirely is not, and it is one of the more consequential accessibility failures because it makes the whole page unnavigable rather than one element unclear.

Checking your own site

Three checks, all quick.

Convert a screenshot to greyscale. Anything that becomes ambiguous was relying on colour. This catches almost everything in one look.

Use a colour vision simulator, available as a browser extension, to see the page as different forms of deficiency present it.

Navigate with the keyboard only, pressing tab through the page, and check you can always see where you are.

The greyscale test is the one to do if you only do one, because it requires no tools and the failures are obvious.

The design consequence

None of this restricts the palette.

You can use whatever colours the brand requires. What changes is that colour becomes reinforcement rather than the sole carrier of meaning: a green tick alongside the word included, an underlined link that is also a different colour, an error in red that also says what to fix.

That is additive rather than restrictive, and it improves the page for everyone, since a reader scanning quickly benefits from a word as much as from a hue.

The contrast side of the same question, and the sizing that goes with it, are covered in making tables readable.

Frequently asked questions

What is the problem beyond contrast?

Meaning carried by colour alone. A page can pass every contrast check and still be unusable if the only indication a field is required is that its label is red.

Who does colour-only meaning affect?

People with colour vision deficiency, which is a meaningful proportion of men, plus anyone in bright sunlight, on a poor screen, printing in black and white, or using a screen reader.

Where does it appear most?

Form errors and required field markers, status indicators, links distinguished only by colour, charts with colour legends, and pricing tables using cell colour.

Which colour pairings cause trouble?

Red and green most commonly, plus green and brown, blue and purple. The underlying issue is any two colours of similar lightness, so varying lightness solves most of it.

What about focus indicators?

Removing the outline showing which element is selected makes the whole page unnavigable by keyboard. Replacing it with something better-looking is fine; deleting it is not.

How do I check my own site?

Convert a screenshot to greyscale and see what becomes ambiguous. That requires no tools and catches almost everything in one look.

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.

Errors on your forms marked only in red?

We add the text and shapes that carry the meaning alongside the colour, without changing your palette.

Start a Conversation