This is an unpublished editor’s draft that might include content that is not finalized. View the published version

Skip to content

Technique G183:Using a contrast ratio of at least 3:1 to distinguish inline text links from surrounding text

About this Technique

This technique relates to 1.4.1 Use of Color (Sufficient).

This technique applies to when inline text links are only distinguished from static non-link text by color and lightness.

Techniques are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet WCAG. Content can satisfy the normative requirements of WCAG even if it does not use any of the documented techniques. See About WCAG Techniques.

Description

To meet Success Criterion 1.4.1 Use of Color, when inline text links are only distinguished from the surrounding static text through the use of a different color – and no other visual indicators, like an underline – then the contrast ratio between the link text and the static text must be at least 3:1.

In this situation, the choice of appropriate link text and non-link text color can be challenging for authors, as not only do they need to ensure appropriate contrast between the link text and non-link text, but each of these colors also still need to satisfy the contrast requirements of the text against the background.

Note

In this technique, the contrast ratio refers to the difference in relative luminance (lightness) between an inline text link and the non-link text around it. In Success Criteria 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced), contrast ratio refers to the contrast between text and its background. The difference is that this technique is about the ability for users to distinguish between pieces of text, whereas the contrast ratio used in Success Criteria 1.4.3 and 1.4.6 is about the readability of the text with its background.

Note

While this technique is sufficient to pass the normative requirement, authors may still consider using an alternative or additional way to indicate links, such as an underline or bold text. Especially for dark colors, it can be difficult to visually distinguish between differently colored text even when the link text contrast to surrounding text meets the required ratio of 3:1.

Examples

Example 1: Text link colors that would provide 3:1 contrast with black non-link text and 4.5:1 contrast with a white background

a { color: #3333FF; text-decoration: none; }

See the working example: Links with a contrast ratio of at least 3:1 with surrounding text

Example 2

The hypertext links in a document are medium-light blue (#3366CC) and the regular text is black (#000000). Beyond the difference in color and lightness, the links have no other styles differences compared with the regular text. Because the blue text is light enough, it has a contrast of 3.9:1 with the surrounding text and can be identified as being different from the surrounding text by people with all types of color vision deficiency, including those individuals who cannot see color at all.

Related Resources

No endorsement implied.

Tests

Procedure

For each instance where color is used to distinguish inline text links from surrounding non-link text:

  1. Check that the color of the link text has a contrast ratio of at least 3:1 against the color of the surrounding non-link text.

Expected Results

  • Check #1 is true.
Back to Top