1.4.3 Contrast (Minimum)

Introduction¶

This check ensures that when link text is over an image, background gradient, or backdrop filter, it remains in sufficient contrast with the background. 

What¶

When link text is placed over a background image, gradient, or backdrop filter, it must maintain a minimum contrast ratio of 4.5:1 with the background across all link states, including:

• Default (unvisited)
• Hovered
• Focused
• Visited.

For large-scale text (18pt or larger, or 14pt and bold), the minimum contrast ratio is 3:1.

Elements that require contrast validation include:

• Links over images, such as navigation menus, banners, and hero sections.
• Links over gradients, such as call-to-action buttons or feature sections.
• Links over semi-transparent overlays, such as modals and cards with backdrop filters.
• Links that use text shadows, shadows must not reduce the effective contrast.

Why¶

Ensure that links remain visible in all states to improves accessibility for:

• Users with low vision: Who rely on high contrast to identify interactive elements.
• Users with color blindness: Who may struggle to differentiate link colors from the background.
• Keyboard and screen reader users: Who rely on visual indicators such as focus outlines and hover changes.
• All users in different viewing conditions: such as bright sunlight or dark mode.

Websites that fail to meet contrast requirements can make links difficult to identify and access. This creates accessibility barriers.

Examples¶

This section provides some pass and fail examples.

Pass examples¶

• High-contrast link with an overlay on an image

  copy

  <div style="position: relative; width: 100%; height: 300px; background-image: url('background.jpg'); background-size: cover;"> 
    <div style="position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);"></div> 
    <a href="#" style="color: #FFFFFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; text-decoration: underline;"> 
      Read More 
    </a> 
  </div> 

  • The dark overlay rgba(0, 0, 0, 0.5) ensures that the white link text is readable.

• Link with a solid background on top of an image

  copy

  <div style="background-image: url('background.jpg'); padding: 20px;"> 
    <a href="#" style="background-color: #000000; color: #FFFFFF; padding: 5px; text-decoration: none;"> 
      Learn More 
    </a> 
  </div> 

  • The solid background behind the link improves contrast.

• Sufficient contrast in all link states

  copy

  a {
    color: #0055AA; /* Default state */
  }
  a:hover, a:focus {
    color: #003377; /* Darker color for hover and focus */
  }
  a:visited {
    color: #800080; /* Ensures visited links are still distinguishable */
  }

  • Each state has adequate contrast against the background.

Fail examples¶

• Link placed directly on an image with no overlay

  copy

  <div style="background-image: url('background.jpg'); padding: 20px;">
    <a href="#" style="color: #FFFFFF;">Click Here</a>
  </div>

  • Issue: The text may be unreadable if the image has bright areas.

• Low-contrast link on a gradient background

  copy

  <p style="color: #CCCCCC; background: linear-gradient(to right, #FFFFFF, #EEEEEE); padding: 10px;">
    <a href="#" style="color: #AAAAAA;">Learn More</a>
  </p>

  • Issue: The light gray text does not meet contrast requirements.

• The incorrect use of text shadow gives a low readability score.

  copy

  <a href="#" style="color: #999999; text-shadow: 2px 2px 4px #FFFFFF;">
    More Info
  </a>

  • Issue: The shadow effect reduces effective contrast, which makes the link hard to read.

• Hover state has low contrast

  copy

  a {
    color: #0055AA; /* Passes contrast */
  }
  a:hover {
    color: #999999; /* Fails contrast */
  }

  • Issue: When users hover the cursor over the link, it becomes hard to see.

Affected users¶

This issue affects:

• People with low vision: Who struggle to distinguish links from the background.
• Users with color blindness: Who may not perceive contrast differences well.
• Users that navigate with a keyboard: Who need clear visual cues when the focus is on links.

How¶

How to review link contrast over backgrounds¶

1. Identify the links that are positioned over images, gradients, or filters.
2. Check the contrast with a contrast checker tool.
3. Test the contrast in all link states: default, hover, focus, and visited.
4. Ensure that text shadows do not reduce the contrast.
5. Test in different lighting conditions such as bright and dark environments.

How to fix it¶

This section provides instructions on how to fix this issue.

• Use a semi-transparent overlay

  copy

  .overlay {
    background-color: rgba(0, 0, 0, 0.5);
  }

  • This helps links stand out and does not hide the background.

• Ensure sufficient contrast in all states

  copy

  a { 
    color: #0055AA; 
  } 
  
  a:hover, a:focus { 
    color: #003377; /* Darker for contrast */ 
  } 
  
  a:visited { 
    color: #800080; 
  } 

  • This prevents links from becoming unreadable when hovered or visited.

• Avoid low-opacity text shadows

  • Instead of:

    copy

    text-shadow: 2px 2px 4px #FFFFFF;

  • Use:

    copy

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    • This maintains contrast and makes the text readable.

Additional resources¶

WCAG success criteria¶

1.4.3 Contrast (Minimum)