This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
Why do error messages and links need more than just colour?
Error messages and links need more than just colour, because many people distinguish colours only to a limited extent — red-green colour blindness is the most common form. A required field outlined in red with no explanatory text stays invisibly marked for these visitors. Information must therefore be carried twice: colour plus text, icon, or underline.
Colour as an addition, never as the sole carrier
Three everyday cases show the problem. First, forms: if an incorrectly filled field is only outlined in red, a visitor with red-green colour blindness won't find the error — add a text message such as "Please enter a valid email address". Second, links in running text: if a link differs from the surrounding text only by its colour, many people won't recognise it as a link — underlining fixes that. Third, charts and status indicators: "green means available, red means fully booked" only works with an additional label or different icons. Colour remains explicitly permitted and useful — it just must never be the only source of information.
How our measurement engine checks the use of colour
The automated check with axe-core detects one typical partial case: links in running text that stand out from the surrounding text through colour alone — with no underline or sufficient brightness difference. Such cases flow into the report as a finding. The larger part of the criterion is beyond the reach of a machine: whether a chart is explained through colour alone, or whether an error message has a text in addition to the red outline, requires understanding the content. In line with our principle, an unremarkable pass therefore never automatically counts as proof — at the Gold Standard level, an auditor reviews forms, charts, and status indicators and makes the call.
Examples
Error only marked red
<label>E-Mail <input class="fehler" style="border-color:red"></label><label for="email">E-Mail</label>
<input id="email" aria-describedby="email-fehler" aria-invalid="true">
<p id="email-fehler">Bitte eine E-Mail-Adresse mit @ eingeben.</p>Red alone does not see people with color defects and reading programs. The text mentions the error.
Link in the flow text only recognizable by color
a { color: #2a6bd6; text-decoration: none; }a { color: #2a6bd6; text-decoration: underline; }The underscore makes the link recognizable even without color perception.
- Check your forms: every error marker needs an explanatory text at the affected field, alongside the colour.
- Have links in running text underlined — colour alone makes them invisible to many visitors.
- Add labels or icons in charts and status indicators, in addition to the colour coding.
- View your page in greyscale once — every screen and many phones can do this — and check whether all the information is preserved.
- Mark required fields with the word "required" or an explained asterisk, never with colour alone.
