Link text must have sufficient color contrast against its background to ensure readability for all users. The WCAG contrast ratio requirements are:
This ensures that users can easily distinguish and read links.
Poor link contrast can make navigation difficult, especially for:
Ensure that you use proper contrast ratio to improve accessibility, usability, and overall readability.
This section provides some pass and fail examples.
High contrast blue link on a white background
<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)
<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.
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.
This check primarily impacts:
This section provides instructions for how to find and fix link contrast issues.
<a>
elements or other interactive text styled as links.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;
WCAG success criteria:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Thu Mar 13 2025 09:57:10 GMT+0000 (Coordinated Universal Time)