Web Design: Link Colours

by Charles Miller on April 4, 2002

Charles' rules of web design #1215: Link colours

Jakob Nielsen tells us that when designing a webpage, we should always keep the browser default link-style: blue underlined text. Of course, nobody does this because in the context of a lot of pages, blue underlined text is pretty ugly. Anyway, here's my rules of thumb for links.

  • Use a contrasting colour.

    The closer your link colour is to the colour of the text around it, the more the links will look like emphasis. The more colour your page uses, the more the link colour should stand out from the rest.

  • If you don't underline, provide some kind of mouse-over effect.

    Underlining links is good, but underlined text can be ugly, and the more links your text contains, the more it'll break the flow of the text to have them underlined (this is often a problem in weblogs). In the absence of underlining, the defacto standard is to have the underlines appear when the mouse is hovered over the link.

    On my journal homepage the links have a grey highlighting on hover instead, but this doesn't show up on the navigation side-bar because the background is already grey. This isn't really a problem because the sidebar is already obviously a list of links.

  • Never, ever, ever put text in the status-bar.

    This is my oldest, A-1 pet web peeve. When I hover over a link, I want to see the destination URL in the status bar. What Netscape were thinking when they allowed webpage authors to hijack the user-interface, I'll never know.

    If you want text to pop up when someone hovers over a link, browsers come with link tool-tips built in - use link titles like this one.

    An especial dislike is on the otherwise nifty Daypop Top 40. You click on a link, it takes you to a script that records you clicked on that link, and then redirects you to where you wanted to go in the first place. This would be mostly OK, except that they hijack the status bar to make it look like you're going directly to the destination website. I hate it when software deliberately lies to me.

  • Make the "already visited" link colour similar to the "unvisited" colour.

    Preferably, it should be the same family as the link colour, but duller. My journal homepage isn't a very good example of this, since I just use an almost indistinguishably lighter shade of blue.

  • Consider just using the defaults. Everyone knows them, and they're not that ugly.

(Hmmm. Why is there a preview option for commenting, but not for posting?)

Previously: Why to be nice to people in airports

Next: Fri, 05 Apr 2002 00:14:50 GMT