Why Link Visibility Matters for Accessibility

Links are one of the most important elements of web navigation; they guide users from one piece of content to another. However, when links are styled using only colour to indicate that they are clickable, many users may not recognise them as interactive elements.

A link that looks like regular text can make it difficult to know where to click. This not only reduces usability but also creates accessibility barriers that affect reading comprehension and navigation.

The Link Visibility feature in the Accessibility Toolkit plugin ensures that links are clearly identifiable without relying on colour alone. It automatically adds visual cues such as underlines or contrast enhancements to make links stand out and remain accessible to everyone.

Who is Affected

This issue especially impacts

• users with visual impairments who may not distinguish colour differences clearly
• users with colour vision deficiencies such as colour blindness
• users with low vision who rely on strong contrast or clear indicators
• users who navigate using a keyboard or screen reader and depend on distinct visual or structural cues to locate links

Understanding the Importance of Visible Links

According to accessibility guidelines such as WCAG 2.2, links must be distinguishable by more than just colour. For example, a blue hyperlink within a paragraph of black text may be obvious to some users, but for users with colour vision deficiencies, both colours might appear very similar, making the link difficult to identify.

This relates to several WCAG success criteria. 1.4.1 Use of Colour requires that colour is not the only means of conveying information, so links should have additional visual indicators such as underlines or bold text. 1.4.11 Non-text Contrast ensures that graphical objects, including links presented as buttons or styled text, have sufficient contrast against the background. 1.4.3 Contrast (Minimum) may also apply if the contrast between the link colour and surrounding text is too low, which can make links hard to see for users with low vision.

By applying these principles, developers can ensure that links are identifiable to all users, including those with colour blindness or other visual impairments.

Greyscale view

Here’s an example of an inaccessible link:

<p>Read more about our <a href="/services" style="color: blue;">services</a></p>

To make it accessible, add an underline or other non-colour indicator:

<p>Read more about our <a href="/services" style="color: blue;
text-decoration: underline;">services</a>.</p>

This ensures that all users can easily identify clickable elements, even if they cannot perceive colour differences.

Underlines added

Checking Link Visibility on Your Site

You can manually check your links’ visibility using the following steps:

1. Open your webpage in a browser.
2. Visually inspect whether links are underlined or otherwise distinct from regular text.
3. Use a colour blindness simulator or browser accessibility tool to test if links remain visible when colours are altered.

If links rely only on colour, users with certain vision conditions might not recognise them.

Enabling Link Visibility in Accessibility Toolkit

The Link Visibility feature automatically enhances link presentation across your website. Once enabled, it ensures all links include visible indicators like underlines or border effects, improving accessibility without requiring you to modify CSS or theme code.

To get started:

1. Go to the Accessibility options in your WordPress dashboard.
2. Enable the checkbox for Link Visibility.
3. Click Save settings at the bottom.

Your website’s links will now stay visually distinct and easy to see for all users. The Accessibility Toolkit plugin adds an underline to links that need more visibility but does not change any other styles like colours or fonts, so your site’s design stays the same.

Before ‘Link visibility’ option is enabled

After ‘Link visibility’ option is enabled

Why It’s Important for Accessibility and SEO

Improving link visibility helps:

• Users with colour vision deficiencies distinguish interactive text.
• Keyboard users understand clickable elements clearly.

Accessible, clearly visible links improve both usability and overall page engagement, benefiting users and your website performance alike.

Best Practices

• Don’t rely on colour alone to indicate links.
• Keep underlines or other consistent visual indicators for all hyperlinks.
• Ensure hover states enhance visibility, not reduce it.
• Maintain sufficient contrast between link text and background.

By ensuring that links are visible and distinguishable, your website becomes easier to navigate for everyone, especially users with vision impairments, helping you achieve a more inclusive digital experience.