Color is equally important in web design as it is in art. When building your artist website, you surely wonder what color a hyperlink should be. This blog post on the Best Hyperlink Colors aims at helping you create good looking links, while keeping link color usability and accessibility in mind. The Hyperlink Style Guide at the end offers you a condensed takeaway of all the hyperlink best practices discussed in this post!
Hyperlinks are the World Wide Web’s elixir of life. They are the magic ingredient that makes the web what it is: a place where you can quickly get from A to B… super-fast and super-easy – just at the click of a mouse.
But seriously, links are the fundamentals of web design. They actually made the web as successful and powerful as it is today.
This blog post aims at telling you everything you need to know in order to choose the best hyperlink colors for your artist website.
After going over all the ins and outs of a good link color, you’ll find our Hyperlink Style Guide at the end of this post that sums up the best practices for you to make an informed link color decision!
At the very beginnings of the Internet, all hyperlinks used to be blue and underlined. Some websites still stick to this standard today…
What color blue is a hyperlink, conventionally?
In the earliest days of the Internet, all hyperlinks were the same default colors: blue for unvisited links and purple for visited links. Plus, all links were underlined and turned red on hover.
But why was that?
Well, the reason for choosing these colors was that colorblind users can easily distinguish between black and blue. The most common form of color-vision deficiency is the red-green color blindness. Red and green colors are detected by the same cells in the eye. About one person in 25 is affected by red-green color blindness. However, almost nobody has a blue-color deficiency.
Therefore, it made sense to choose a blue color that nearly everyone can easily distinguish from the surrounding black text.
Have you noticed that some of the most popular websites are still using this conventional color standard today?
Google, for example, still uses blue (#0000FF) for unvisited links and purple (#800080) for visited links. If you have huge numbers of daily users, there’s without doubt a large percentage that suffers from color blindness. Hence, it’s a good move to stick with what has proven to work!
But what are the best hyperlink colors today – still blue?
As an artist, you know how much color matters. Color is not only extremely important in art, it’s also essential in web design.
Color impacts the aesthetics and appeal of your artist website like nothing else. Besides, it’s also an important factor for branding.
You surely prefer to use your favorite colors – maybe those colors that are typical of your art – for your artist website. That’s absolutely understandable!
The best hyperlink colors support design and branding of your website.
The good news is that you don’t necessary need to stick to the old blue-and-purple rule anymore.
If you browse around your favorite blogs or famous websites, you’ll notice that nowadays links come in many different colors and styles. Young web users might not even be aware of the old link color convention anymore.
However, keeping link color usability and possible vision deficiencies in mind, what color should a hyperlink be?
This is what we’re going to talk about right now in the next paragraph!
What color should a hyperlink be?
As a rule to thumb, everything a link color needs to be is distinctive. It should always be possible for your website visitors to immediately spot what is a link and what is not – without hovering the mouse over it first.
All it takes to make links on your artist website identifiable as clickable is a distinct color – and maybe some text decoration (such as underline, bold, or italic), if you like.
For example, if you use dark text on a white background, and some words or phrases in the text are orange and underlined, then most users will immediately understand that those are links.
If they need confirmation, they can just hover their mouse over it to see if the cursor transforms into a hand… Doing that one time is enough. After that, users should be used to your link design!
Which brings us to the next point: consistency. While good hyperlinks do not always need to be blue, one thing they must be is consistent. That means if you’ve chosen to make links within your blog posts orange – keep them orange all through!
However, consistency means not that ALL links on your site need to be orange. Links in the navigation menu can have their own color, as can links in the footer section.
Consistency for hyperlink best practices means that all links within one area (navigation, header, footer, blog content…) should be consistent in color and style.
Hyperlink best practices require links to be consistent & immediately identifiable.
All in all, you cannot go wrong with some shade of blue. It doesn’t necessarily have to be the default one. However, people are more likely to associate a blue color with a link than other colors.
And keeping in mind that almost everyone can distinguish blue from other colors, it makes sense that the best hyperlink colors are some sort of blue in a broader sense.
So if you’ve already defined your website’s color palette and if there is, by any chance, some kind of blue in it – light blue, dark blue, turquoise, cyan… – then use that blue shade for your links!
As important as choosing a good link color is to make the links on your artist website stand out.
How do you make a link stand out?
A link stands out by being immediately distinguishable from non-clickable content. But it’s not color alone that makes a link appear different from the main text on your website.
Differentiation can also be achieved by weight, style, or an underline. For example, you can change the font weight of hyperlinks by making them bold. You can change the font style by making links italic.
However, one thing you should give a second thought is the underline. A study found that underlined links significantly impact readability. The more underlined links you have on your website, the less user-friendly it becomes.
The reason why underlined links reduce web usability is that some letters extend below the level of the base line, such as g, j, p, q, and y. Either, the descenders of those letters will get crossed by the underline, or the underline will be broken up and look incomplete, as you can see in the example.
While underlining links sidesteps accessibility issues for users with color blindness, it can also make your text harder and more inconvenient to read.
So let’s summarize what we found out so far: good looking hyperlinks should be a distinct color, immediately distinguishable from the main text, and easy to read!
Hyperlink Style Guide
At the end of the day, it’s completely up to you how you design your links… what color you select and whether you choose to underline your links or not.
The following quick Hyperlink Style Guide is meant to sum up what we’ve discussed above and help you decide on the best hyperlink colors for your artist website!
So, here’s again what is important when choosing a good link color:
- Rule #1: Choose a distinct color for hyperlinks that makes them stand out from the main text and immediately recognizable.
- Rule #2: Choose a bright color that catches the eye and makes your hyperlinks pop out.
- Rule #3: Aesthetics and branding are more important than outdated link color conventions. Use link colors that match the overall design of your website and your brand.
- Rule #4: Blue shades still rank high for best hyperlink colors. If your website’s color palette includes any blue tone, then use that blue for your hyperlinks.
- Rule #5: Keep in mind that there’s a significant percentage of users who are colorblind. Avoid using green and red for hyperlinks on your site.
- Rule #6: Keep your links consistent. All links in a particular area of your website (navigation, header, footer, post content) should look the same.
- Rule #7: The best hover color for links is similar to your regular link color but creates a highlighting effect when hovering the mouse over the link.
- Rule #8: Don’t use your link color for non-clickable text on your website. This would only confuse your visitors on what is a link and what isn’t.
- Rule #9: Underlining links can enhance accessibility. But keep in mind that it also makes links harder to read.
- Rule #10: Avoid underlining non-clickable text. Use bold or italic letters for emphasis instead.
Learn more about Color on your Artist Website:
Hey peeps, I hope you that enjoyed this little post about the best hyperlink colors for your artist website and that it helped you find a good link color for your site! If so, please share the post with other website owners and leave a comment! See you soon, Angie 💝
