How Should You Choose Colors for Breadcrumbs? Navigation Color Schemes That Do Not Stand Out Too Much

Breadcrumbs are navigation that show a user’s location in a site hierarchy, such as “Home › Category › Current page.” Because they support the main content rather than compete with it, they usually work better with restrained neutral colors than with a strong accent applied everywhere. The goal is to distinguish parent links, separators, and the current page without making the breadcrumb trail dominate the page. Subtle styling should still preserve readable text contrast and visible focus.

Separate parent links and the current page with tone and shape

In the following HEX examples, where HEX is a hexadecimal color code used on the web, use white ■#FFFFFF for the breadcrumb background. Blue-gray ■#475569 for parent-page links provides about 7.58:1 contrast against white. Dark blue-gray ■#334155 for the current page provides about 10.35:1.

Do not distinguish links by color alone; retain another cue such as an underline. If the current page is not a link, leaving it without an underline and giving it heavier text weight can add a shape and weight difference from the parent links. WCAG (Web Content Accessibility Guidelines) 2.2 Use of Color requires that color not be the only visual means of conveying information.

If separators such as “›” or “/” use slate gray ■#64748B, they provide about 4.76:1 contrast against white ■#FFFFFF. That keeps them visually quieter than the parent links while maintaining strong text contrast. Treat the separators as presentation and communicate the hierarchy through list structure so the visual symbol is not carrying the meaning by itself.

Build the breadcrumb as hierarchical navigation, not just styled text

W3C’s Breadcrumb Pattern describes a breadcrumb trail as a hierarchical list of links to parent pages of the current page. The trail is contained in a <nav> landmark and given a name such as aria-label="Breadcrumb". The example also presents the items as an ordered list.

If the current page is included as a link, aria-current="page" can identify it programmatically as the current location. If the element representing the current page is not a link, W3C’s Breadcrumb Pattern says aria-current is optional. Visually, using bold text without the link underline for the current page can distinguish it from parent navigation without relying only on color.

W3C’s Breadcrumb Example adds visual separators with CSS (Cascading Style Sheets, which control the visual presentation of a web page) so screen readers do not announce redundant separator content. Rather than making separator color prominent, prioritize a structure that already communicates the relationship among links and the current page.

Use a slightly stronger color only for hover and focus states

Keep normal links at ■#475569, and on hover use royal blue ■#1D4ED8, which provides about 6.70:1 contrast against white ■#FFFFFF. Using the stronger accent only when users interact with a link helps keep the breadcrumb trail from drawing more attention than the main content.

For keyboard focus, one example is a blue ■#2563EB ring against white ■#FFFFFF, which provides about 5.17:1 contrast. W3C Focus Visible requires a visible focus indicator for keyboard-operable elements. Keep normal links, the current location, hover, and focus visually distinct so those states do not blur together.

If the breadcrumb sits on a light-gray ■#F8FAFC background, parent links in ■#475569 provide about 7.24:1 contrast, the current page in ■#334155 provides about 9.90:1, separators in ■#64748B provide about 4.55:1, and a ■#2563EB focus ring provides about 4.94:1. When the background changes, recheck the actual combinations instead of assuming a color that worked on white will still work.

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 breadcrumb links, the current page, separators, focus indicators, and the real page background separately.