1.4.3 Contrast (Minimum)

Introduction

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

• Link text fails minimum contrast requirements.

What

Link text must have sufficient color contrast against its background to ensure readability for all users. The WCAG contrast ratio requirements are:

• At least 4.5:1 for regular text.
• At least 3:1 for large text that is 18pt and larger, or 14pt and bold.

This ensures that users can easily distinguish and read links.

Why

Poor link contrast can make navigation difficult for some users. Ensure that you use proper contrast ratio to improve accessibility, usability, and overall readability.

Who

Affected users

This check primarily impacts:

• Users with low vision: Who require clear visual differentiation and find it hard to differentiate links from surrounding text.
• Users with color blindness: Who may not perceive contrast effectively and find it difficult to see some color combinations.

1.4.3 Contrast (Minimum)

Introduction

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

• Link text fails minimum contrast requirements.

What

Link text must have sufficient color contrast against its background to ensure readability for all users. The WCAG contrast ratio requirements are:

• At least 4.5:1 for regular text.
• At least 3:1 for large text that is 18pt and larger, or 14pt and bold.

This ensures that users can easily distinguish and read links.

Why

Poor link contrast can make navigation difficult for some users. Ensure that you use proper contrast ratio to improve accessibility, usability, and overall readability.

Who

Affected users

This check primarily impacts:

• Users with low vision: Who require clear visual differentiation and find it hard to differentiate links from surrounding text.
• Users with color blindness: Who may not perceive contrast effectively and find it difficult to see some color combinations.
• All users: Who find it difficult to see low contrast links under glare or poor screen visibility.

Examples

This section provides some pass and fail examples.

Pass examples

• High contrast blue link on a white background

  copy

  <a href="#" style="color: #0055FF; background-color: #FFFFFF;">Click 

  The contrast ratio is 8.6:1, which exceeds the 4.5:1 requirement.

• Dark blue link (#003366) on a white background (#FFFFFF) 

  copy

  <a href="#" style="color: #003366; background-color: #FFFFFF;">Accessible Link</a>

  The contrast ratio is 7.8:1, which exceeds the 4.5:1 requirement.

• Large bold link with lower contrast to meet the requirements for large text

  copy

  <a href="#" style="color: #666666; font-size: 18pt; background-color: #FFFFFF;">Learn More</a>

  The contrast ratio is 3.5:1, which is acceptable for large-scale text.

Fail examples

• Light gray link on a white background has an insufficient contrast ratio

  copy

  <a href="#" style="color: #AAAAAA; background-color: #FFFFFF;">Click Here</a>

  The contrast ratio in this example is 2.5:1, which fails to meet the WCAG requirements.

• Pastel blue link on a light gray background is hard to distinguish

  copy

  <a href="#" style="color: #99CCFF; background-color: #DDDDDD;">More Info</a>

  The contrast ratio in this example is 2.8:1, which fails to meet the WCAG requirements.

How

This section provides instructions for 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 links on the page. Look for <a> elements or other interactive text styled as links.
2. Check the color contrast ratio in the following ways:
   • Use browser developer tools to inspect the foreground text color and background color of links.
   • Use an online contrast checker or a browser extension.
3. Verify that large text meets the lower contrast requirement
   • If the text is 18pt or larger, or 14pt and bold, the contrast ratio should be 3:1 or higher.

How to fix it

• Adjust the link color
  Ensure that the link text color provides sufficient contrast with the background:

  copy

  <a href="#" style="color: #0055FF; background-color: #FFFFFF;">Accessible Link</a>

• Add a distinct background for low-contrast links

  Ensure that the the background provides sufficient contrast with the link text color:

  copy

  <a href="#" style="color: #666666; background-color: #F8F8F8; padding: 4px;">Better Contrast Link</a>

• Use text decoration for additional visibility

  Add an underline or bold style to improve link visibility:

  copy

  a {
  color: #0055FF; 
  text-decoration: underline;
  font-weight: bold;

Additional resources

• Acquia Color Contrast Checker

WCAG success criteria: 

1.4.3 Contrast (Minimum)