Links must be distinguished from surrounding text in a way that does not rely on color

Rule Description

Ensures users who cannot distinguish between colors can tell when text is a link by verifying the link has either a distinct style that does not rely on color, or has a contrast difference of greater than 3:1 (which alerts you that manual testing is required).

The Algorithm, in Simple Terms

Checks all links that appear in blocks of text for a color contrast difference of at least 3:1 with the surrounding text to ensure that users who cannot distinguish between the colors can still find the link.

This rule looks at common ways to distinguish links from surrounding text, including underline, font styling, border and background. If the link has a distinct style that does not rely on color, there is no violation (pass). If the link has no distinct style and it has a contrast difference less than 3:1, there is a violation (fail). When the link has no distinct style and it has a contrast difference of 3:1 or greater, you must verify that the link gets distinct style on focus and hover (manual testing required), as this cannot be automated reliably.

Why this is Important

Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.

There are nearly three times more individuals with low vision than those with total blindness. One person in twelve has some sort of color deficiency - about 8% of men and 0.4% of women in the US. A person with low vision or color blindness will not be able to distinguish text against a background without sufficient contrast.

When a sufficient color contrast ratio of 3:1 is not present to distinguish link text color from surrounding text color, users with low vision who experience low contrast cannot detect visually that the text is intended to function as a link.

Compliance Data & Impact

User Impact: Critical
Disabilities Affected:
  • Low Vision
  • Color-blindness
Severity: Critical
Issue Type:
  • WCAG 2.0 (A): SHOULD
  • Deque Experimental
  • WCAG 2.1 (A): SHOULD
WCAG Success Criteria:
  • 1.4.1 Use of Color
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

Ensure all links that appear in blocks of text have a color contrast difference of at least 3:1 with the surrounding text to ensure that users who cannot distinguish between the colors can still find the link.

When the link has no distinct style and it has a contrast difference of 3:1 or greater, you must manually test to verify that the link gets distinct style on focus and hover.

Success Criterion: Ensure color contrast of at least 3:1 for link text.

Deque's open-source aXe and FireEyes II (for WorldSpace Attest and Comply) products are excellent, reliable tools to help you analyze the contrast ratio of your colors and tell you if they pass the 3:1 ratio guidelines or not.

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: link-in-text-block