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.

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.

Examples of non-colour-based techniques
  • adding an underline to the link
  • using bold text
  • adding an icon (for example, an arrow to indicate that the control takes the user somewhere)
  • ensuring that linked text has a minimum contrast ratio of 3:1 against surrounding non-linked text

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.

Text

Contrast requirements

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:

Contrast requirements

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.

Exceptions

A link does not need to meet contrast requirements if: