Most are familiar with tabs found in files and folders. But tabs are also a metaphorical way for users to navigate through content. A tab navigation should function and behaves like real tabs. This means that users should be able to see which tabs are showing and 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.
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.