WebsightWhat it asks for, in plain English
Colour can carry information, but never on its own. If the only thing telling someone a field has an error is a red border, or the only thing marking a link in a paragraph is that it is blue, or the only way to read a chart is by matching line colours to a legend, people who cannot see those colours get nothing.
Add a second cue: an icon, a text label, an underline, a pattern, a shape, bold weight or a different position. The colour can stay.
This is separate from contrast (1.4.3). A pale red border that fails contrast is a contrast problem; a vivid red border that is the only signal of an error is a use of colour problem.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.4.1 page has the full intent, techniques and definitions.
Who it affects
A man with red-green colour blindness (about 1 in 12 men) cannot see which fields went red on a form, so he keeps submitting it and keeps being rejected.
Someone using a monochrome e-ink display or high contrast mode sees every status dot as the same grey.
A person reading a chart printed in black and white cannot match four grey lines to a four-colour legend.
Example
If you cannot tell the red label from the black one, you cannot tell which field is required.
The asterisk and the word optional carry the information. The red is still there for people who find it helpful.
Show the markup behind both examples
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}p{margin:0 0 10px}label{display:block;margin:8px 0 4px}.req{color:#b91c1c}input{padding:6px;border:1px solid #6b7280;border-radius:4px;width:220px}</style>
<p>Fields shown in red are required.</p>
<label class="req" for="n">Full name</label><input id="n">
<label for="c">Company</label><input id="c"><style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}p{margin:0 0 10px}label{display:block;margin:8px 0 4px}.req{color:#b91c1c}input{padding:6px;border:1px solid #6b7280;border-radius:4px;width:220px}</style>
<p>Required fields are marked with an asterisk (*).</p>
<label for="n">Full name <span class="req">*</span></label><input id="n">
<label for="c">Company (optional)</label><input id="c">How to check it
- Take a screenshot of the page and convert it to greyscale (most image editors can, and browser dev tools can emulate colour vision deficiency). Can you still tell required from optional, error from fine, link from text?
- Submit a form with mistakes. Each error should have an icon or text, not just a red outline.
- Read a paragraph that contains links. Each link should be underlined or otherwise marked, not only coloured.
- Look at charts, calendars and status indicators for a shape, label or pattern alongside each colour.
What Websight checks for 1.4.1
Websight runs this automated check for 1.4.1:
Websight's link-in-text check flags links inside a paragraph that differ from the surrounding words by colour alone, without an underline or enough contrast between the two. Errors, status colours, chart legends and anything else that depends on meaning need a person; this is on the manual checklist.
Practical tips
- Underline links in body text. It is the one cue every reader recognises.
- Pair each status colour with an icon and a word: a green tick that says Paid, a red cross that says Failed.
- For charts, label lines directly at the end of each line, and use different dash patterns or markers.
Other criteria in guideline 1.4, Distinguishable
- 1.4.2 Audio Control (level A)
- 1.4.3 Contrast (Minimum) (level AA)
- 1.4.4 Resize Text (level AA)
- 1.4.5 Images of Text (level AA)
- 1.4.10 Reflow (level AA)
- 1.4.11 Non-text Contrast (level AA)
- 1.4.12 Text Spacing (level AA)
- 1.4.13 Content on Hover or Focus (level AA)