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:
- Use text underlining, font styling, borders or use a different background color for the link.
- 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 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.
Free Website Accessibility Audit
Was this article helpful?
Thanks for your feedback!
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.