6

How should you determine the difference between colors of visited vs unvisited links?

As an example: I'm working on a theme where link color is purple. I need some suggestion on visited link color and do you think I should not use purple for link color rather should use black with underline.

2
  • I've edited your question so that it's less focused just on your one situation and more applicable to a wide range of people having similar issues.
    – JonW
    Oct 17, 2013 at 10:37
  • Related (more general) question at ux.stackexchange.com/questions/45414/…. Oct 17, 2013 at 12:08

4 Answers 4

6

Hyperlinks should be distinctive from other types of text in a page. If your normal text is black then hyper link color should be different.

According to Nielsen "The color for unvisited links should be more vivid, bright, and saturated than the color for visited links, which should look "used" (dull and washed out). " be consistent whatever color you choose.

you can refer these articles for more information:

http://www.nngroup.com/articles/guidelines-for-visualizing-links/

http://www.nngroup.com/articles/change-the-color-of-visited-links/

1
  • 3
    good ol' Jakob :-)
    – Lovis
    Oct 17, 2013 at 12:01
4

First of all, when you change any colors on your page (background, text, link, hover link, active link, visited link), then you should change them all, in case some of your page's visitors have overridden the default browser colors.

Second of all, since visited links are still links, I think that their colors should not differ much from the regular links' colors. Purple (default for visited) vs. Blue (default for links) are close together on the color triangle. As Awesh mentioned, the nature of the difference which seems intuitive to new vs. old (visited) link is a fresher color vs. duller color e.g. less bright or less saturated.

Third of all, make sure all your text colors have high enough contrast from the background. E.g. if the background is white, make all the text colors at least as dark as 50% grey and if your background is black, make all the text colors at least as bright as 50% grey, or better yet, check out the W3C guidelines or explanation in this answer.

Forth of all, if you do alter the default colors, consider offering an alternative theme, in case the theme you choose is not comfortable for some visitors (see this answer for more info).

Reference image, the color triangle:
Color triangle

4

You're in a bit of a corner if you're committed to using purple for the unvisited link color. Your fighting the convention that purple is the color of visited links. I think a grey for visited links might be the best compromise. As others have mentioned, visited links should be less saturated than unvisited links to suggest they're less important than unvisited links. Black for unvisited links would also work, but grey makes them stand out a little more.

And by all means keep the underlines on both kinds of links.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3

You should not use purple as the default color of links, because purple is the default color of "visited" links. You will be confusing the end user by diverging from the standards.

Reference: Windows UI Guidelines (but I am pretty sure the same guidelines apply elsewhere). http://msdn.microsoft.com/en-us/library/windows/desktop/aa511283.aspx "Links within Web pages use blue for unvisited and purple for visited."

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.