---
title: "Link text fails minimum contrast requirements"
date: "2025-03-12T11:51:14+00:00"
summary: "Ensure link text contrasts sufficiently with its background for better readability. Learn how to meet WCAG contrast requirements, understand their importance for accessibility, and find tips to fix common issues."
image:
type: "page"
url: "/web-governance/link-text-fails-minimum-contrast-requirements"
id: "4bf0d4b3-5a26-40da-9b9c-088f53988d7c"
---

Table of contents will be added

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**
    
        <a href="#" style="color: #0055FF; background-color: #FFFFFF;">Click Here</a>
    
    The contrast ratio is 8.6:1, which exceeds the 4.5:1 requirement.
    
*   **Dark blue link (#003366) on a white background (#FFFFFF)** 
    
        <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**
    
        <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**
    
        <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**
    
        <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:
    
        <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:
    
        <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:
    
        a {
        color: #0055FF; 
        text-decoration: underline;
        font-weight: bold;
    

Additional resources
--------------------

*   [Acquia Color Contrast Checker](https://www.acquia.com/products/acquia-optimize/tools/color-contrast-checker)

### WCAG success criteria: 

[1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)