I've been working on a side navigation reconstruction project that is now entering the design phase. Through research i've noticed many sites using different colored text to highlight/bookmark user location or a background color with different text color. Examples below from Twitter Bootstrap and Google News.

Twitter Bootstrap Navigation

Google News Navigation

In providing a better user experience do users need heavy colored indicators (background colors) to represent page location or will a simple text colored link item work?

4 Answers 4


That depends on how much you want to emphasise it. A background colour is definitely more noticeable than a coloured link, but it is also more distracting.

You need to decide what the best balance is for your application as one is not always better than the other.

  • I think a colored background with various hues for different states is the way to go. I also looked into some less distracting colors which will indicate where the user is but not draw too much attention. Thanks for your help. Dec 3, 2012 at 13:04

There are really more than two choices.

You can use background shading or hot colors like you suggested above. But you can also change the font weight, use bullets, or add indentation. In short, you can use any of the Gestalt principles to visually differentiate the current option. Whatever works with your site design.

I might add, that you should be careful about using more than one strategy at the same time (e.g. bullets and shading). It's usually too much.

Conversely, you should also make sure that whatever you go with has enough visual contrast from the other options to set it apart. This is a question of degree more than type. There are certain exceptions, such as high contrast mode, where using one strategy only (color) won't work because the color information gets removed before display.

Remember your colorblind combinations and use a contrast checker if you need to.

  • Isn't it crucial for accessibility to offer two different strategies? E.g. a high-contrast-mode user would have no clue which page is active because there is no color information available at all.
    – unor
    Nov 29, 2012 at 13:06
  • @Unor: You are correct it is crucial to offer different strategies but before I can move forward with that I need to see which navigation pattern (examples above) provides for a better user experience. I'll be investigating color after the pattern has been established. Nov 29, 2012 at 15:08
  • I'll point out that I said that you should "be careful" about using more than one strategy at the same time; not to avoid it. There are certainly exceptions, and you've pointed out a very specific one: using color only doesn't work in high contrast mode. I've edited by answer to clarify.
    – Jeremy T
    Nov 29, 2012 at 15:42
  • @Jeremy: Thankfully I have a test subject that will be helping with high contrast matter but your contrast checker is a great resource and will really come in handy. Nov 29, 2012 at 16:16

You should definitely indicate the current page nav item and it should not be a link (that is it should not be clickable to reload the current page and not have a pointer change to indicate click-ability, it could still be link that is disabled).

There are many ways to indicate the current page nav item: different text color, background color, border box, a different margin (indented), etc. When I do navigation menus I think of how 3 states should be indicated: a plain active link to another page, the current page, and the hover over an active link (even though this isn't useful on touch UIs it's useful on mouse driven UIs). All 3 states should be clear and obvious and not require experimentation on the user's part to determine what they mean.

Personally, I find the google news indication by just using a red text color not enough, I'd prefer a stronger indicator.


With accessibility in mind, when using color to highlight the current page in the menu, you should offer a different way (not depending on color) in addition.

See WCAG 2.0: 1.4.1 Use of Color:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

See the technique G128: Indicating current location within navigation bars. It gives examples:

  • different background color + adding check mark icon
  • adding asterisk character
  • different background color + disabling link (*)

(*): it's arguably what "disabled" means here; is it enough to "unlink" it (and don't offer a click mouse cursor), or does it need to be greyed out or something?

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.