Underline Your Links!

The title of this Accessibility Weekly is clear enough that you could almost stop just with the title, “Underline Your Links,” and know what you’re supposed to do. Want to know more? Read on for why and when you should underline links in a web design.

Why Links Should Be Underlined

Traditionally, links have been underlined to distinguish them from regular text and make them easier to identify. These days, it’s less common to show an underline on links, and many websites are designed with links that just use a different color from the text. This can cause problems for a lot of people. Let’s talk about why.

WCAG 2.1 Success Criterion 1.4.1 Use of Color (Level A)

WCAG Success Criterion 1.4.1 Use of Color states that, “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

This guideline requires that links be visually distinguishable from surrounding text in some way other than color.

Why Color Alone is a Problem

If color is the only visual cue that text is linked to, users who cannot perceive color or who have difficulty distinguishing between different colors due to color blindness or low vision may not know the link is there.

To Underline or Not to Underline

When designing a web page, you want to provide multiple visual cues to indicate that a link is present and that the text is clickable. Typically, this is done with an underline, an icon, or styling the link to look like a button.

Always Underline Links in Blocks of Text

Links in body text, paragraphs, or other blocks of text should always be underlined. This typically also applies to links that appear in lists and “Read More” links that follow post excerpts.

Anytime the link uses the same font and size as your typical paragraph text, the link should be underlined.

Exceptions

Success Criterion 1.4.1 doesn’t explicitly require underlines; it just requires that you add some other visual indicator. In some cases, adding an icon (such as a right-pointing arrow) next to a link would be sufficient to differentiate it as a link if there is also additional padding or margin around the link and if it has a different font weight, size, or style from standard paragraph text.

Navigation menus are another place where underlines are not required because their design makes it clear that they are clickable elements. And as mentioned above, styling a link as a button with a background color that sufficiently contrasts from the page background and/or a border around it is another case where underlines are not required.

The Bottom Line

The bottom line when deciding if links need to be underlined is to make sure the links stand out. You don’t want people playing “Where’s Waldo” on your website trying to figure out if they can click on something.

Bonus: Underline Only Links

Because links are traditionally underlined on the web, people have learned to expect any underlined text to be a clickable link. The reverse of the “underline your links” rule is that you should never underline anything that isn’t a link.

Underlines are not for emphasis. Use bold or italics instead. It saves your users from frustration when they try to click on the underlined text expecting it to do something but finding out that it doesn’t.

Additional Resources

• Understanding SC 1.4.1: Use of Color (Level A)
• SC 1.4.1 Techniques and Failures