Links and Legibility

[deirdre]

Back when the web was born, links were underlined. Many early browsers (e.g., lynx) were text only, and many people didn’t have color monitors, or had monitors that were severely limited in palettes (like 16 colors), so the convention of underlines stayed.

However, an underlined link isn’t as legible as one that isn’t underlined.

For those of you who want some thoughts about alternatives, here’s a few:

1) Make the color different than surrounding un-linked text, and add a change of color when the text is hovered over or active. E.g.:

a {text-decoration: none}
a:link {color: #ff9900}
a:active, a:hover {color: #ff0000} /* change from orange to red */

2) add a more delicate border when hovered over, e.g.:

a {text-decoration: none}
a:link {color: #ff9900}
a:active, a:hover {border: bottom: thin dotted #ff9900} /* add border when hovering */

3) add some fancy schmancy effect when hovering. Right now, on deirdre.net, I change the text color and add a text-shadow effect:

a{color:#00437f; text-decoration:none}
a:hover{color: #002444; text-decoration:none; border-bottom: none; text-shadow: #00598d 0 0 4px}

Just be clear and give sufficient contrast that people understand a) it’s a link, and b) when the link is hovered over or active.

You can see a live example here.

Originally published at deirdre.net. You can comment here or there.