1.4.3 Contrast (Minimum)

Introduction¶

This check ensures that when link text is activated through hover, focus, active, or visited, it remains in sufficient contrast with the background. 

What¶

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

• At least 4.5:1 for standard-sized text.
• At least 3:1 for large-scale text (24px or 18.67px bold).

This ensures that link text remains legible and accessible under all conditions.

Why¶

This section provides information about why this check is important and provides some examples.

Why is this important?¶

Sufficient contrast provides the following:

• Maintains readability in all interactions: Users can read link text regardless of its state.
• Ensures accessibility for visually impaired users: Users can easily distinguish high contrast link text.
• Prevents usability issues: Links that change color on hover or focus remain visible.

Examples¶

This section provides some pass and fail examples.

Pass examples¶

• Sufficient contrast for all states

  copy

  a {
    color: #0055cc; /* Contrast ratio: 7.1:1 on white */
  }
  a:hover,
  a:focus {
    color: #003399; /* Contrast ratio: 5.2:1 on white */
  }

  • Why this works:
    • The default link color (#0055cc) has sufficient contrast against the white background (7.1:1).
    • The hover/focus color (#003399) maintains a contrast ratio above 4.5:1.

• Large-scale text requires 3:1 contrast

  copy

  .large-link {
    font-size: 24px;
    color: #666666; /* Contrast ratio: 4.2:1 */
  }
  .large-link:hover {
    color: #555555; /* Contrast ratio: 3.5:1 */
  }

  • Why this works:
    • The text is 24px or larger.
    • The colors maintain the required contrast.

Fail examples¶

• Insufficient contrast in default state

  copy

  a { 
    color: #888888; /* Contrast ratio: 2.5:1 on white */ 
  } 
  

  • Issue:
    • The contrast is below 4.5:1, which fails to meet the criteria.

  • Fix:

    copy

    a {
      color: #0055cc; /* Contrast ratio: 7.1:1 */
    }

• Hover/focus state fails contrast requirement

  copy

  a {
    color: #0055cc; /* Good contrast */
  }
  a:hover {
    color: #999999; /* Contrast ratio: 2.8:1 */
  }

  • Issue:
    • The hover color (#999999) is below 4.5:1, which fails to meet the criteria.

  • Fix:

    copy

    a:hover {
      color: #003399; /* Contrast ratio: 5.2:1 */
    }

• Large text fails contrast minimum (requires 3:1)

  copy

  .large-link {
    font-size: 24px;
    color: #aaaaaa; /* Contrast ratio: 2.7:1 */
  }

  • Issue:
    • The contrast is below the required 3:1 for large text.

  • Fix:

    copy

    .large-link {
      color: #666666; /* Contrast ratio: 4.2:1 */
    }
    How

How¶

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

How to review it¶

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

How to fix it¶

• Use sufficiently contrasting colors

  copy

  a {
    color: #004488; /* Contrast 7.1:1 */
  }
  a:hover {
    color: #002266; /* Contrast 5.8:1 */
  }

• Use contrast detection tools such as:

  • Acquia Optimize Color Contrast Checker
  • Google Chrome DevTools on the Accessibility tab

• Ensure that large text meets the 3:1 requirement

  copy

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

Additional resources¶

WCAG criteria¶

1.4.3 Contrast (Minimum)