Any information presented only through colour cues may not be seen by people who are blind, have partial sight, or are colour-blind. This includes information indicating an action, prompting a response, or distinguishing a visual element.
How to Fix
Ensure that any information presented only through colour cues is available in text or through other (non-colour) visual cues. Try viewing the page in greyscale to determine what information is unavailable when viewing the page in this state.
- Use the alternative text of an image to convey any colour cues.
- For complex graphs or data, use patterns or shapes in addition to colour to convey differences.
Links Surrounded by Text
- Use a colour contrast tool (Such as the WebAim website or the Paciello Group software) to ensure that the contrast between the link and the surrounding text is at least 3:1.
- Add an additional visual cue (for example, underline) when the link receives focus or is hovered over.
Required or Error Fields
- Indicate any required fields using clear, visible label text.
- Consider using the aria-required property to identify required fields.
- Good Example: Firstname (Required):
Things to Avoid
- Do not use only colour to indicate that a field is required or has been left blank.
- Do not style links surrounded by text in such a way that it is difficult to distinguish the link from the surrounding body text.
- Avoid using just an asterisk (*) to indicate required fields. If you do choose to use an asterisk, provide clear instructions about the meaning of the asterisk before the required fields.
Take it to the Next Level (AA)
- Large-scale text can have a contrast ratio of at least 3:1, provided the computed value of the font-size is at least 18 point or 14 point in bold.
- Logos and images of decorative text are exempt from these requirements.
- Understanding Success Criterion 1.4.1 Use of Colour (Level A)
- Understanding Success Criterion 1.4.3 Contrast (Minimum) (Level AA)
- WebAIM Article on WCAG 2.0 and Link Colours
- WebAIM Colour Contrast Checker (Online)
- Paciello Group Colour Contrast Analyser (Free Download)
- What's Large Text in WCAG 2.0 Parlance - Paciello Group Blog Article