Pick My Brain #011: Do I have to use blue for hyperlinks in my UI design?

Today’s question comes from Krista, one of the 11,000+ students taking my User Experience Design Fundamentals course on Udemy.

Q: Is it important to use blue for hyperlinks? Blue clashes with our color palette. Do I need a different color for links moused over? selected? If so, what is a rule of thumb for that?

A: Great question Krista. The short answer is no, blue is not required at all. What is important, however, is that:

1. The hyperlinks stand out visually from the other text, and
2. On laptops or desktops, there is a state change that indicates interactivity.

For phones and tablets, there’s no hover state, so #1 above is most important. In that scenario, you can change color: for example, make hyperlinks orange if the text is black or dark grey (use a significantly different color). You can also make hyperlinks bold, a different font size, or a different font altogether. And, if it’s not visually distracting, you can underline them. All of these approaches send a clear visual signal that this piece of text is a link; that it does something.

For #2, you’d do this in addition to making the link visually distinct. When a link changes appearance on hover, for example, you’re sending a clear signal to the user that reinforces their suspicion that this does something. An appearing underline, a change to bold, or a significant change in color all reinforce the message that this is a link.

And in my opinion, you do not need a state for links already followed. What I’ve seen is that it most often confuses people, because that additional color adds another layer of visual information that competes with what’s already there. One more thing to think about, understand, contend with. This is an old convention that should probably be abolished 🙂

Hope that’s helpful – GIVE GOOD UX!