How Should You Choose Colors for Tab UI? How to Make Selected and Unselected States Easy to Understand

Tab UI (user interface) lets users switch among multiple sections of content in the same area. A clear color scheme keeps unselected tabs quiet and gives the selected tab the strongest visual treatment. However, a small background-color difference may not be enough to show selection. Combine color with an underline, text weight, and visible focus so “selected” and “currently focused” remain distinct states.

Use a light surface for unselected tabs and white plus an accent line for the selected tab

In the following HEX examples, where HEX is a hexadecimal color code used on the web, use light gray ■#F1F5F9 for the tab-list background and blue-gray ■#475569 for unselected-tab text. The contrast ratio, meaning the difference in relative luminance between foreground and background, is about 6.92:1.

For the selected tab, use white ■#FFFFFF for the background and dark blue ■#1E3A8A for the text, which provides about 10.36:1 contrast. Add a royal-blue ■#1D4ED8 selection indicator along the bottom edge; it provides about 6.70:1 contrast against white ■#FFFFFF and about 6.12:1 against the surrounding light gray ■#F1F5F9.

White ■#FFFFFF and light gray ■#F1F5F9 differ by only about 1.10:1, so do not rely on the background change alone to communicate selection. WCAG (Web Content Accessibility Guidelines) 2.2 Use of Color requires that color not be the only visual means of conveying information, and Non-text Contrast requires at least 3:1 contrast against adjacent colors for visual information needed to identify user-interface components and states. Keep a non-color cue such as an underline or heavier text.

Expose selection with aria-selected and keep it separate from keyboard focus

W3C’s Tabs Pattern uses a tablist containing tab elements, each associated with a tabpanel. The tab corresponding to the displayed panel has aria-selected="true", while the other tabs have it set to false. The visual selected state should stay synchronized with that programmatic state.

In a tab interface, “selected” and “focused” do not always mean the same thing. W3C’s manual-activation example lets users move focus among tabs with the Left and Right Arrow keys, then activate a tab with Enter or Space. In that model, focus can move while the currently displayed panel remains unchanged.

That is why it helps to use the ■#1D4ED8 underline for selection and a separate dark-navy ■#0F172A outer ring for focus. The focus ring provides about 17.85:1 contrast against white ■#FFFFFF and about 16.30:1 against light gray ■#F1F5F9. W3C Focus Visible requires a visible focus indicator for keyboard-operable elements.

Return the tab panel to a normal reading palette and avoid adding extra state colors

For the active tabpanel, use white ■#FFFFFF for the content background and dark blue-gray ■#334155 for body text, which provides about 10.35:1 contrast. Keeping the accent concentrated on the selected tab instead of coloring the whole panel makes “which tab is selected” distinct from “where the content is read.”

W3C’s Tabs Pattern describes a tabbed interface in which the panel associated with the active tab is displayed while panels associated with inactive tabs are hidden. Even as the number of tabs grows, keeping three visual roles—unselected, selected, and focused—lets the interface remain consistent without introducing more colors.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, then compare the selected color with white and black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual adjacent combinations used for tab backgrounds, text, selection indicators, and focus rings separately.