Accessible links without underlines

When styling hyperlinks within blocks of text, sticking to the convention of underlines is always preferable. It’s clear, easily understood, and accessible.

If the design calls for text links to not have underlines, but change the color of links, you are now confronted with a three sided design constraint. Simply having a different color is not sufficient, because this difference may not be perceivable to users with colorblindness or other visual impairments.

Without outlines (or relying on alternate styling such as italics or bold treatements), you need to rely purely on contrast in order to be accessible. And that contrast needs to exist between:

  • The regular text color AND
  • The link color AND
  • The background color

All three of these colors need sufficient contrast between each other. Contrast will be what makes a link look different enough from the text around it that a colorblind user will still be able to see that it is different.

How much contrast?

3.1, according to the WCAG 2.0 standard.

How do I check?

There are quite a few contrast checkers out on the web. My personal favorite is the Contrast Ratio by Lea Verou. It (and most other tools out there) only compare two colors, so there will be some manual work involved checking the three colors against each other.

You need to compare your link color to your regular text color, and make sure the contrast value is above 3.1.

Over and above that you need to make sure both your link and text colors provide sufficient contrast from the background color, (usually 4.5:1), depending on the size of your type. See the WCAG 2.0 standard on background/foreground contrast.

Special Thanks

Thanks to Dennis Lembree for spot checking this post.