Colour Contrast

Problem

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.

Images

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)

Use a colour contrast tool (Such as the WebAim website or the Paciello Group software) to ensure a contrast ratio of at least 4.5:1 between text (including images of text) and its background.

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.