• June 1, 2025

Ensuring Link Visibility in Text Blocks for Accessibility

Rule ID: link-in-text-block
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549

How to Fix the Problem

To ensure accessibility for users with low vision or color deficiencies, all links embedded in paragraphs or blocks of text must meet a minimum color contrast ratio of at least 3:1 compared to the surrounding text. This allows users to identify links based on visual difference, even if they have difficulty distinguishing colors.

Follow these steps to ensure compliance:

1. Check Color Contrast:

   • Use tools such as the axe browser extension or WorldSpace Attest to measure the contrast ratio between link text and surrounding content.

   • Ensure that link color differs from surrounding text color by a minimum ratio of 3:1.

2. Use Visual Styling:

   • If the contrast alone is not sufficient, apply additional visual indicators such as:

     • Underlining

     • Bold font

     • Italics (when combined with other cues)

     • Borders or background highlights

3. Manual Verification for Focus and Hover:

   • When a link is only differentiated by color and has a contrast ratio of 3:1 or higher, you must manually verify that:

     • On focus (e.g., using the keyboard), the link becomes visually distinct.

     • On hover (e.g., using the mouse), the link style changes visibly (e.g., underline appears).

   • This ensures non-color-based cues are available, which is essential for users with color perception challenges.

4. Avoid Relying on Color Alone:

   • Never use color as the sole method for identifying links in text. Always include a secondary visual indicator.

Why it Matters

Individuals with low vision or color blindness may not perceive differences in color the same way as fully sighted users. Without a clear contrast or distinguishing style, link text can blend into the surrounding paragraph, making it impossible to detect.

• Over 8% of men and 0.4% of women in the U.S. have some form of color deficiency.

• Three times as many people experience low vision compared to complete blindness.

• Inaccessible link text prevents navigation, interaction, and understanding—resulting in frustration, task failure, or legal risk.

Meeting this standard significantly improves usability for a wide segment of users.

Rule Description

This rule checks for sufficient visual differentiation of link text within text blocks. It validates whether the link:

• Has a contrast ratio of 3:1 or greater with the surrounding text, or

• Uses a distinct style (such as underline, bolding, etc.) that does not rely on color alone.

If neither condition is met, the content fails accessibility requirements.

The Algorithm (in simple terms)

1. Find all links inside blocks of text.

2. Compare the color of the link to the color of the surrounding text.

3. If contrast is less than 3:1, it’s a failure.

4. If contrast is 3:1 or more, check if the link gets a distinct visual style on focus and hover.

5. If the link already has a non-color-based style (e.g., underline), it passes.

This ensures all users—including those with color perception issues—can recognize and interact with links.