---
title: "Is link text distinguishable in all interactive states? (Enhanced)"
date: "2025-03-18T08:57:54+00:00"
summary: "Ensure link text color meets enhanced contrast in all states for better accessibility and readability."
image:
type: "page"
url: "/web-governance/link-text-distinguishable-all-interactive-states-enhanced"
id: "7dbf97ba-35f5-4741-a735-d6de61adb6d2"
---

Table of contents will be added

1.4.6 Contrast (Enhanced)

Introduction
------------

This document provides information about the Acquia Web Governance accessibility check:

*   Is link text distinguishable in all interactive states? (Enhanced)
    ==================================================================
    

What
----

The color of link text in all user-induced states such as hover, focus, active, and visited, must have enhanced contrast with its background. The required contrast ratios are:

*   At least 7:1 for standard-sized text
*   At least 4.5:1 for large-scale text (24px or 18.67px bold)

This ensures that link text remains highly legible for users with visual impairments.

Why
---

This success criteria states that contrast must be calculated so that color is not a key factor. This helps people with a color vision deficit.

*   **Enhances readability in all interactions**:
    
    Ensures that link text remains visible across different states.
    
*   **Improves accessibility for visually impaired users**:
    
    Higher contrast helps users with low vision to distinguish link text.
    
*   **Prevents usability issues**:
    
    Links that change color on hover or focus must remain easily identifiable.
    

Examples
--------

This section provides some pass and fail examples.

### Pass examples

*   **Sufficient contrast for all states**
    
        a {
          color: #003366; /* Contrast ratio: 12.6:1 on white */
        }
        a:hover,
        a:focus {
          color: #002244; /* Contrast ratio: 9.5:1 on white */
        }
    
    Why this works:
    
    *   The default link color (#003366) has sufficient contrast (12.6:1).
    *   The hover/focus color (#002244) maintains a contrast ratio above 7:1.
*   **Large-scale text meets enhanced contrast minimum**
    
        .large-link {
          font-size: 24px;
          color: #444444; /* Contrast ratio: 5.2:1 */
        }
        .large-link:hover {
          color: #333333; /* Contrast ratio: 4.8:1 */
        }
    
    Why this works:
    
    *   Since the text is 24px or larger, it requires only 4.5:1 contrast.
    *   The colors maintain the necessary contrast ratio.

### Fail examples

*   **Insufficient contrast in default state**
    
        a {
          color: #777777; /* Contrast ratio: 4.3:1 on white */
        }
    
    Issue:
    
    *   The contrast is below 7:1, which does not meet the requirement.
    
    Fix:
    
        a {
          color: #003366; /* Contrast ratio: 12.6:1 */
        }
    
*   **Hover/focus state fails enhanced contrast requirement**
    
        a {
         color: #003366; /* Good contrast */
        }
        a:hover {
         color: #555555; /* Contrast ratio: 5.1:1 */
        }
    
    Issue:
    
    *   The hover color (#555555) is below 7:1.
    
    Fix:
    
        a:hover {
          color: #002244; /* Contrast ratio: 9.5:1 */
        }
    
*   **Large text fails enhanced contrast minimum (requires 4.5:1)**
    
        .large-link {
          font-size: 24px;
          color: #888888; /* Contrast ratio: 3.2:1 */
        }
    
    Issue:
    
    *   The contrast is below the required 4.5:1 for large text.
    
    Fix:
    
        .large-link {
          color: #444444; /* Contrast ratio: 5.2:1 */
        }
    

How
---

This section provides instructions on how to review and fix the issue.

### How to review it

This section provides instructions on how to review this issue.

*   **Identify all user-induced states of links:**
    *   Default
    *   Hover
    *   Focus
    *   Active
    *   Visited.
*   **Use a contrast checker to verify that each state meets these requirements:**
    *   7:1 for normal text
    *   4.5:1 for large-scale text
*   **Ensure that all interactions maintain readability and do not cause color contrast failures.**

### How to fix it

This section provides information about some ways to fix the issue.

*   **Use sufficiently contrasting colors**
    
        a {
          color: #002255; /* Contrast 9.8:1 */
        }
        a:hover {
          color: #001133; /* Contrast 7.4:1 */
        }
    
*   **Use a contrast checking tool such as:**
    
    *   Acquia [Color Contrast Checker](https://www.acquia.com/products/acquia-optimize/tools/color-contrast-checker)
    *   Google Chrome DevTools (Accessibility Tab)
*   **Ensure that large text meets the 4.5:1 requirement**
    

    .large-link {
      font-size: 24px;
      color: #444444; /* Contrast 5.2:1 */
    }

Additional resources
--------------------

### WCAG success criteria

[1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html)