1.4.3 Contrast (Minimum)

Introduction

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

• Do links on top of images have minimum contrast?

What

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

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: Including navigation menus, banners, and hero sections.
• Links over gradients: Including call-to-action buttons or feature sections.
• Links over semi-transparent overlays: Including modals and cards with backdrop filters.
• Links that use text shadows: Including shadows which can reduce the effective contrast.

Why

Websites that fail to meet contrast requirements make links difficult to identify and access. This creates accessibility barriers. Links that remain visible in all states improve site accessibility.

Who

Affected users

• 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: Who find it hard to see links on websites when in bright sunlight or when their device is in dark mode.

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.

How

This section provides information on how to identify and fix the issue.

How to identify it

The Acquia Web Governance platform highlights elements that contain text with insufficient contrast levels, including standard text on the website as well as link text in various states.

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)

Do links on top of images have minimum contrast?