Make links distinguishable by using styles other than color

Last updated:

This evaluation is included in the Accessibility audit offered by ExcellentWebCheck. Ensuring website accessibility is essential to ensure everyone can use the internet without barriers.

How to fix the problem?

To address the issue, ensure that links are easily distinguishable from surrounding text. You can achieve this by meeting one of the following requirements:

 

  1. Use text underlining, font styling, borders or use a different background color for the link.
  2. Maintain a color contrast of at least 3:1 between link text and paragraph text. Manually verify that links receive distinct styles on focus and hover.
A link in a text block with blue text color without underline
A link in a text block with blue text color and underline

 

A best practice is to underline links to make them distinguishable:

<p>
  Example
  <a href="https://example.com" style="text-decoration: underline"> website </a>
  link
</p>

Why is this important?

Individuals with low vision or color vision deficiencies may have difficulty distinguishing links from regular text when color is the only distinguishing factor.

 

Color vision deficiency affects approximately 1 in 12 men.

Was this article helpful?

Checkout the ExcellentWebCheck services

ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.