by anthony on 01/02/11 at 3:36 pm
Color contrast plays an important role in design aesthetics. But for tab navigation, color contrast plays an important role in design usability. Tab navigation is a metaphorical way for users to navigate through content. Because a tab navigation functions and behaves like tabs, it should also look and feel like real tabs. When your tab navigation looks and feels like real tabs, your users will be able to effortlessly point out which tab is showing content and which tabs are hiding content. The key to achieving this effect is color contrast.
Foreground & background
In a tab navigation, the tab that is showing content should always highlight. The tab should look like it’s in the foreground. For this to happen, the color of the tab has to contrast with the color of the background.. The tabs that are hiding content should not highlight. The tabs should look like they are in the background. For this to happen, the color of the tabs have to blend with the color of the background. Applying color contrast to your tabs correctly will make your tab navigation easy to use.
In the examples below, it’s clear where the foreground is. This is because the tab that’s showing itself has a high color contrast to the tabs that are hiding in the background. This works the same way with a white or shaded background. As the user clicks each tab, the high color contrast between the foreground and background is kept. The tabs hiding in the background are still visible, but the color contrast is low. You don’t have to use the same color as the background for them, but the color you use should not compete with the color of the tab that’s showing. That way users can effortlessly point out which tab they’re looking at and which tabs they can click to.
Another effective way to design tab navigation, is to only put a tab around the label that is showing content. The labels that are hiding content would have no tab around them. This makes the highlighted tab stand out more because there are no other tabs competing with it. Not only is the color of the highlighted tab distinct, but the shape of it too. The tab metaphor is not as strong with this approach, but it makes it clearer which tab users are looking at.
A good tab navigation is clear, distinct and allows the user to navigate effortlessly. A bad tab navigation is unclear, confusing and makes the user work to figure out which tab they’re looking at. By applying high and low color contrast to your tabs correctly, you’ll be able to design a tab navigation that suits your users.