One of my go-to strategies that applies to both accessibility and just designing generally usable websites, is that if you have the opportunity to match the browser’s default behavior, you should probably take it.

A lot of developers end up resetting link colors. It’s not a bad idea. Sometimes you want a link that looks like a button!

But you should probably have a class like this:

a.link {
  color: royalblue;
  text-decoration: underline;
}

The colors don’t matter here, I just think royalblue is a nice looking named blue.

We’ve been conditioned to expect links to be blue and underlined, so if you don’t have some reason to do otherwise, why not match it?

I think it’s totally ok to break this guideline, whenever you want! I think blue in nav links in headers looks a little strange, unless the site is designed around a very minimal feeling. But for links that you really want to be readable, especially in body text, consider just going with the default visual style.

This includes underlines. Much has been written in the past about sites deciding to forego this visual guide as well. Suffice it to say, I think underlines are probably more important than coding links blue.

Pseudoclasses

I’ve gotten so used to blank anchor tags, that I sometimes forget that :visited even exists. You encounter it increasingly rarely these days, which isn’t great.

The browser defaults are usually purple for visited and a different blue for hover (or maybe increasing lightness? I haven’t dug deeply into all the user agent stylesheets), so I think some variation on this is a nice starting point:

a.link {
  color: royalblue;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.link:visited { color: indigo }
a.link:hover { color: blue }
a.link:active { color: red }