Links: Colour and contrast
A link must not rely on colour alone to be visible to people with low vision or colour blindness. It also needs to stand out with sufficient contrast against its surrounding colours.
To understand the importance of colour and contrast ratio requirements, see the Knowledge Area: Colour and contrast.
Meeting the Web Accessibility Standard
When a link does not rely on colour alone to identify itself or its states visually, this meets WCAG 2 Success Criterion 1.4.1 Use of Color (Level A).
When text or images of text within a link have sufficient contrast, this meets WCAG 2 Success Criterion 1.4.3 Contrast (Minimum) (Level AA).
When a link’s visual information or graphical objects have sufficient contrast, this meets WCAG 2 Success Criterion 1.4.11 Non-text Contrast (Level AA).
Do not rely on colour alone
Make sure that links and their different states are presented visually in ways that do not rely on colour alone.
In some cases— for example, a typical website menu or sidebar — the link’s visual position and context can be enough to indicate that it’s a link, even if it does not have any kind of explicit link styling.
But where a text link is located within or between passages of non-linked text, it must be distinguishable visually from the non-linked text in some way that does not use colour.
Non-colour-based visual techniques for links
To make sure that colour is not the only way for someone to identify a link or one of its states visually, use a non-colour-based visual technique as well.
Provide sufficient contrast
Certain parts of a link need to stand out or contrast sufficiently against their surrounding colours in order to be visible to people with low vision or colour blindness.
The text or image of text in a link must have a minimum contrast ratio of 4.5:1 against surrounding colours, unless it is large text, in which case it needs at least 3:1 contrast.
If the link is just text and has no other visual cues that it is a link, such as an underline, then the text must have a minimum contrast ratio of 3:1 against any immediately adjacent non-linked text.
Visual information and graphical objects
A link usually contains visual information, like an underline, colour or icon, that indicates:
- that there is a link
- the link’s target or purpose
- the link’s different states — for example, focused, hovered, visited.
Any meaningful visual information or graphical objects, such as icons, in the link must have a minimum contrast ratio of 3:1 against adjacent colours.
For more about the contrast requirements for visual information and graphical content, see Understanding Success Criterion 1.4.11: Non-text Contrast — WCAG 2 — W3C.
Note: The 3:1 contrast ratio is especially critical for the visible indicator that displays when the link has keyboard focus.
A link does not need to meet contrast requirements if:
- the link is inactive or disabled
- the link’s visual appearance is set by the browser and not modified via CSS by the developer
- the way that graphical objects in a link are displayed is essential to understanding what they mean (for an example, see Exceptions — Graphical objects — Knowledge Area: Colour and contrast).