But I’ve never stopped and wondered, why are links blue? It was just a fact of life. Grass is green and hyperlinks are blue.
Elise Blanchard, “Why Are Hyperlinks Blue?“
Call me old school, but I like websites with blue hyperlinks. It takes me back to a time when the blue hyperlink was the universal signal that this underlined word or phrase will lead me to a new place if I choose to click it.
Hyperlinks: From Black to Blue
Until last night’s switcharoo back to blue, the hyperlinks on this site have been underlined black for the past year. It was a design choice I made at the time to cut down on what I rightly or wrongly felt was a cluttered interface. I was making (and taking) a break from color and transitioned my personal blog toward black, white, and lighter shades of gray and tan.
Overstimulation can get the best of me, so I’m one of those folks who keep their phone in grayscale mode the majority of the day. I utilize the same option on my laptop, albeit with less regularity.
Before the hyperlinks were underlined black, they were blue without the underline. Before that, an underlined blue as they are now. Before that, I have no idea. But they were something and before that, something else. Now, here I am again, back to where I started: the blue underline.
I considered underlined red hyperlinks instead of blue. The choice was to draw even more attention to the link. Much to my dismay, over time I have found that people, meaning: readers of this site, really don’t like clicking hyperlinks — even if that hyperlink will take them somewhere cool or to a new story.
Time is a factor for this decision to click out or not. Maybe they came for my latest story and that’s it. But color plays a role and black underlined links, if I’m thinking about my own personal experience on websites, don’t do it for me. Hence, initially coding the site update with red hyperlinks only to change my mind.
Without doing any A/B testing, I’d safely say red would achieve this goal of drawn attention. But for me, it was too in your face. The red may burn a hole in one’s iris, but would it intrigue a click? I opted against the color red.
When I think of websites where hyperlinks are vital in taking you from one destination to the next, the two sites that come to mind quicker than others are Google and Wikipedia. In 2016, Google experimented with black hyperlinks instead of blue and the Internet lost its mind. After the test, it was back to blue. Sorry AC/DC fans. No back in black for Google.
The other site I mentioned is Wikipedia. Here’s a link to their Hyperlink reference page. Like Google, Wikipedia utilizes the blue hyperlink. It’s a visual cue a word or phrase in this specific color will take you to another Wikipedia page. Interestingly, neither Google or Wikipedia include the once traditional underline.
I was trying to envision Wikipedia using underlined black links and what effect it would have on the site. It’s possible they’ve done study panels on this, or another color, and concluded it renders less clickthroughs on their site.
The Wild West of Hyperlink Styles
Being that today we live in a Wild West of sorts when it comes to hyperlink styles, it comes down to personal preference for web designers and decision makers. If you’re a large entity, branding reigns supreme. I’ve designed websites for companies whose main brand color is purple. It would look odd for logos, headings, and subheadings to be purple and hyperlinks a traditional Internet blue. On the backend, the links are blue and it looks odd. They aren’t complimentary. They oppose one another.
The same applies for companies whose primary brand color is red. The hyperlinks were coded red to create a uniform look. Green is another brand color I’ve used in web design. However, it’s a color for accessibility purposes you need to be careful with. I convinced the church whose website I designed, in that case, to go with an underlined black.
When I think of personal blogs and other websites I visit on a weekly basis, the entire spectrum of possibilities unveils itself. I see orange without underline more than I’d like. Even though my eyes register the color and my brain knows this is a hyperlink, there’s a disconnect for me here.
Underlined black hyperlinks are the most common I see. I’ve used it. Millions of others use it. It’s the default styling on sites like Medium who view it as a distraction-free option within an individual story. Technically, black hyperlinks were the standard before blue because color options on monitors weren’t readily available.
A Hyperlink Is a Signal
But to go back to the Google and Wikipedia examples above, I’m not sure an underlined black hyperlink is the best choice. If your site employs brighter colors like greens and reds, perhaps it is. But if your site has a minimal design, the color palette black, white, or light gray, blue may be the wisest choice — whether underlined or not.
It’s not about what’s safe in this case. It’s about ensuring the visitor on your site sees the hyperlink for what it is. If you want them to click it, you may want to re-think your color or styling decision.
Because a hyperlink is a signal. That is what it is. It says to the reader of your site, “This is important.” At least, it should. Otherwise, why link it? The hyperlink may point to an external source or reference an internal page of interest. No matter what’s behind the url, you are designating it a higher level of importance as opposed to the unlinked body text that surrounds it in every direction up and down.
Personal Preference
Of course, we all have our personal preferences and opinions. For me, I like an underlined blue. Others may choose a different color. They may highlight the background of the link, code a change on hover, toss some dots or dashes in the underline, or use an altogether different font for the hyperlink — a serif for the link and a sans serif for the rest of the body text. Maybe even small caps for the hyperlink of the same font.
I would advise against the latter approach. There is a website I love that does this and this is a poor accessibility decision. I don’t care how it’s coded for screen readers. Call me a fool but I had no clue, until about an hour into reading his site, that his design choice of using small caps meant those words were indeed hyperlinks.
The site is beautiful and presents itself cleanly like the inside of a book, which is part of his intent. The problem, however, is a webpage is not a book. As important as one’s typography decision is to increase readability and accessibility, the same applies for visual cues.
Is It Accessible?
In the end, no matter which color or styling you choose, it comes down to one main thing: is it accessible? I’d like to think there’s no one on the world wide web using a yellow hyperlink on a white background (and dare I mention a pink background), but I know you’re out there. Even lighter shades of blue are hard to read on a white background, not to mention darker shades of blue on a dark background.
Even if you think blue or another color you are using feels right to your eyes, your eyes alone aren’t to be the judge and jury. The easiest way to test your blog or website’s accessibility is to run it through Google’s PageSpeed Insights tool. You’ll get a score for four categories:
- Performance
- Accessibility
- SEO
- Best Practices
From there, it shows you what you need to fix and it does a solid job of laying it out for you. Make sure you click on the dropdown arrows under each component.
The homepage of this site, for example, has a desktop score of 98 (Performance), 100 (Accessibility), 100 (SEO), and 100 (Best Practices). My mobile score on Performance isn’t as good so I have work to do there, but Accessibility, SEO, and Best Practices are still 100.
The key component for me, however, isn’t Performance, SEO, or Best Practices. Are they important? Yes. But of the four, Accessibility is the one I concentrate heaviest on and you should, too, if you keep a site on the web.
I know, for a fact, there are pages on this site — aside from my homepage — that aren’t up to snuff in terms of accessibility and I’m diligently working through updating them so that anyone with a visual or hearing impairment who visits my site can have the best experience possible.
The Golden Age of the Blue Era
Is it a wonder Weezer’s hit album was The Blue Album or Picasso’s rise included his Blue Period? Forget Guernica for a moment or that Weezer’s best album, in my humble opinion, was Pinkerton which, at the time, was eviscerated by music critics but now fondly looked upon. Sometimes, hindsight is what matters.
Call it nostalgia for an era that no longer exists. Call it what you will. For me, the blue hyperlink represents the height of the blogging boom in my life. As much as I find myself going against the grain in all facets of life, the standard practice isn’t always a bad thing. “Where would that underlined blue hyperlink take me today” I used to think when I stumbled on a new blog back in the late 90s and early 00s? Let’s find out.
The unwavering love I have for the blue hyperlink on the Internet is strong in this young padawan. It doesn’t mean it’s right for you. Hell, I think the first website I ever created was coded with neon green text on a black background during the High Contrast Era of CRT monitors.
Ah, GeoCities.
But I won’t be going back in that direction.
Because when it comes to hyperlinks, blue it is for me.
“You’re my boy, Blue!”
This post was made possible by my generous supporters. Become a paid supporter for cheaper than a combo meal and add your name to the wall.