A red border means an error. A green dot means “active”. Blue text is a link. At first glance everything seems clear – as long as the user sees those differences in the same way as the designer. WCAG does not ban the use of colour. It only requires that colour is not the sole way important information is communicated.

The rule is simpler than it sounds

WCAG 2.2 Success Criterion 1.4.1, “Use of Color”, says colour must not be used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. W3C gives very familiar examples: required fields marked only in red, errors shown only in red, or data series distinguished only by colour.

Fixing the problem usually does not require redesigning the interface. In most cases, adding a second signal is enough: text, an icon, a shape, a pattern, an underline or another clear visual feature. The colour can stay. It simply stops being the only instruction.

WebsiteGarage / Services

Explore our services.

Forms: a red border does not explain what happened

This is one of the most practical tests. Submit a form with an empty required field or an invalid email address. If the only change is a red outline around the field, the message depends entirely on colour perception. A better pattern combines colour with a text message such as “Enter a valid email address” and correctly associates the error with the specific field.

The same applies to required fields. Making the label red is not enough. An asterisk with an explanation, the word “required”, or another clear indicator communicates the information regardless of how the user perceives colour.

Statuses: a green dot and a red dot are not enough

Customer portals, booking systems, inventory systems and dashboards love status dots. Green means “OK”, red means “problem”, yellow means “warning”. That system is quick to scan visually, but it should not end with colour. Adding text such as “active”, “error” or “pending”, or using a suitable icon, keeps the status understandable even when colours cannot be distinguished.

Charts: a legend in five colours is not enough

Charts make this problem especially easy to create because several data series are often differentiated only by colour. A solution can be to label lines directly, use different patterns or markers, or apply another form of encoding that does not disappear when colour does. The chart can still be colourful. It just needs to remain readable when colour is no longer doing all the work.

If a link inside a paragraph differs from ordinary text only by colour, you need to check whether the specific implementation actually meets WCAG requirements. The simplest and most robust approach is still a traditional underline or another visible cue that does not depend only on hue.

This is not a war on colour

W3C explicitly notes that colour is an important design tool and can improve usability and accessibility. The problem starts only when meaning disappears along with the colour. A well-designed interface can use green, red, lime and magenta as much as it likes, as long as users do not need to recognise a specific colour to understand what they are supposed to do.

A quick test you can do without an audit

  • submit every form with an error and check whether the message exists independently of colour,
  • review statuses, badges and alerts – do they include text, a symbol or another cue,
  • check charts and legends – can the series be distinguished without having to guess the colour,
  • check links in running text – are they visible to someone who cannot perceive differences in hue.

Turning on greyscale can be a useful rough test: it quickly reveals places where the design relies almost entirely on colour. It is not a simulator for every kind of colour vision deficiency, however, and it does not replace WCAG testing.

WebsiteGarage’s take

This is one of those accessibility problems that looks “specialist” until you see it in a normal contact form. Then it turns out that the fix is often one sentence next to a red border or one icon next to a status.

That is exactly why it is worth checking. Not every WCAG issue requires a major project, a frontend rebuild and a week of meetings. Sometimes it is enough to stop expecting colour to be decoration, message, instruction and alarm system all at once.