Use of colour (not just contrast)

The rule: colour is never the only cue

It is Level A, so it sits inside every Level AA target. W3C's note on it names who it is for: people with partial sight, who often see colour poorly; many older people; people with a colour vision deficiency; and anyone on a monochrome screen or a black-and-white printout. W3C is just as clear that the rule does not discourage colour, or even colour coding, as long as something else carries the meaning too.

It is a different question from contrast. The contrast rules ask whether text stands out from its background; 1.4.1 asks whether the meaning survives once the hue is gone. A page can pass every contrast check and still fail here, as the samples below do.

Three details people miss

• Lightness counts as a second cue. Two colours that differ by at least 3:1 in relative luminance, like a light green and a dark red, are told apart by lightness, not hue alone. But if the reader has to know which colour is which (a green outline for valid, red for invalid), W3C says another cue is needed whatever the ratio.
• It is about sight, not screen readers. What a screen reader announces is covered by 1.1.1, 1.3.1 and 4.1.2. A hidden "error" label read aloud does not fix a red border a sighted visitor cannot tell apart.
• Visited links are not your job. Browsers only let pages change the colour of a visited link, so W3C does not count a colour-only visited state as a failure.

Links in a paragraph: underline, or 3:1 from the text

A link in running text is the most common place this rule breaks. Remove the underline, leave only a colour, and W3C counts it as a failure (F73). A cue that appears only on hover or keyboard focus does not rescue it: the visitor has to find the link before pointing at it. Bold, an underline or a border all count; a different colour on its own does not.

That is two ratios at once: the link against the text beside it at 3:1, and both against the background at 4.5:1. With near-black text like this page's #171717 on white, the link colour has to land between 4.5:1 and about 6:1 against the white. Few brand colours fit that band, which is why the G183 note itself suggests an underline or bold anyway. W3C's own example is a blue of #3366CC, 3.9:1 against black text. To test both pairs, run them through the contrast check.

Older versions of G183, still quoted on many sites, also asked for an extra cue on hover and focus; the current text has only the 3:1 test. Tools have not all caught up: axe's rule for this, link-in-text-block, still asks you to check that kind of hover and focus style by hand. The simple answer satisfies every version: underline links in body text, as every link on this site is. F73 itself notes that links such as a navigation menu can be evident from the page design; it is links inside sentences that depend on their own styling.

Form errors and required fields

W3C's failure F81 describes the two habits exactly: a required field marked only by a red label, and a field with an error marked only by red. The fix it points to is plain text: the word "required" inside the label (technique G205, so it is also read out with the field), and an error message that says what went wrong. A bold label or a strong enough lightness difference also meets 1.4.1, but F81 warns that the form may still fail other criteria, such as 3.3.1 Error Identification, which wants the error described in text.

The asterisk is common and works when the form says what it means at the top. The rest of a good form (labels, error messages tied to their fields, a sensible order) is in accessible forms.

Charts, graphs and maps

A chart that tells series apart by a colour key fails as soon as two of its colours have similar lightness, and brand palettes are full of those. W3C's technique G111 pairs every colour with a pattern: a bar chart where each region has its own fill pattern and the key shows the same patterns, or a transport map where each route's stops have their own shape, a diamond on one line and a square on the next. Labelling bars and lines directly, with their values in text, removes the key altogether.

Two more traps. A star rating whose filled stars are yellow and empty ones white, with the same outline, relies on hue; W3C uses it as its own example of a 1.4.1 fail. And when a chart or map is an image, its alt text has to carry what the colours mean, or it fails twice (F13). The alt text check helps with the wording. The parts of a chart also need 3:1 against their background under 1.4.11, as the contrast guide explains.

Status badges, toggles and the current tab

Order lists, booking calendars and dashboards love a traffic light. Green, amber and red feel obvious, but in many palettes they sit at nearly the same lightness. This site's own success, warning and error colours are only 1.01 to 1.14:1 apart, so it never lets them speak alone: every status here is a word, and the comparison tables say Yes, No, Not stated or Check with the vendor, never a tick. The audit services comparison shows the pattern, and the three orders at the top of this page show what the dots lose without their hue.

The same applies to state. A selected tab or filter shown only as a darker shade of the same button fails 1.4.1; W3C uses exactly that as its example. Add a bold label, a bar under the current tab or a border, and give it aria-selected or aria-current so a screen reader hears it too. An on/off switch needs a word or a moving thumb, not just a colour change.

How to check a page for colour-only meaning

Every pair of samples above has a "Show without colour" button. It lays a greyscale filter over the samples: a rough stand-in that removes hue and keeps lightness, the thing this rule is about. It is not a simulation of any particular colour vision deficiency; W3C calls people who see no colour at all rare. It answers one question well: is anything left that only colour was saying?

1. Find every place a colour means something: the table lists the usual ones on a small-business site.
2. View the page in greyscale (most operating systems have a greyscale display filter) or print it in black and white.
3. For each place, ask whether a word, a shape, a pattern, an underline or a 3:1 lightness step still carries the meaning.
4. Run a scanner for the links; that is the part of 1.4.1 scanners can measure. The rest needs a person looking, which is why it is a line of the WCAG 2.2 AA checklist.