1.4.3 Contrast (Minimum)

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, especially for:

• Users with low vision: Who find it hard to differentiate links from surrounding text.
• Users with color blindness: Who find it difficult to see some color combinations.
• Users in bright environments: Who find it difficult to see low contrast links under glare.

Ensure that you use proper contrast ratio to improve accessibility, usability, and overall readability.

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.

Affected users¶

This check primarily impacts:

• Users with low vision who require clear visual differentiation.
• Users with color blindness who may not perceive contrast effectively.
• All users in environments with glare or poor screen visibility.

How¶

This section provides instructions for how to find and fix link contrast issues.

How to review link contrast¶

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¶

WCAG success criteria:

1.4.3 Contrast (Minimum)