1.4.6 Contrast (Enhanced)

Introduction¶

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.

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¶

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