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

  copy

  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

  copy

  .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

  copy

  a {
    color: #777777; /* Contrast ratio: 4.3:1 on white */
  }

  Issue:

  • The contrast is below 7:1, which does not meet the requirement.

  Fix:

  copy

  a {
    color: #003366; /* Contrast ratio: 12.6:1 */
  }

• Hover/focus state fails enhanced contrast requirement

  copy

  a {
   color: #003366; /* Good contrast */
  }
  a:hover {
   color: #555555; /* Contrast ratio: 5.1:1 */
  }

  Issue:

  • The hover color (#555555) is below 7:1.

  Fix:

  copy

  a:hover {
    color: #002244; /* Contrast ratio: 9.5:1 */
  }

• Large text fails enhanced contrast minimum (requires 4.5:1)

  copy

  .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:

  copy

  .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

  copy

  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
  • 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)

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

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