Color contrast and focus indicators: the two fixes that help everyone

If you could fix only two things about your navigation’s accessibility, fix color contrast and focus indicators. They address the two most common barriers—people who can’t read the text and people who can’t see where they are—and they benefit everyone, not just users with diagnosed disabilities.

Low contrast and invisible focus indicators are also the most frequently failed WCAG criteria in ecommerce navigation. Automated accessibility scanners flag them on nearly every site audit. Courts cite them in lawsuits. And unlike ARIA roles or keyboard traps, they can be fixed with CSS alone—no JavaScript, no HTML restructuring, no theme rewrite.

Color contrast: what the numbers mean

Color contrast is measured as a ratio between the luminance of the foreground (text or icon) and the background. WCAG defines two thresholds:

• 4.5:1 for normal text (under 18pt or under 14pt bold)
• 3:1 for large text (18pt and above, or 14pt bold and above)

A ratio of 1:1 means the foreground and background are the same color—invisible. A ratio of 21:1 is the maximum—black text on a white background. Most readable navigation falls somewhere between 7:1 and 12:1.

Examples in navigation context:

The last example is important: a purple navigation bar with white text might look high-contrast to the eye but fail the mathematical threshold. Perception is unreliable—always measure.

How to check contrast

Several free tools measure contrast ratios:

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker): Enter foreground and background hex codes, see the ratio instantly.
• Chrome DevTools: Inspect an element, click the color swatch in the Styles panel, and the contrast ratio appears. A green checkmark means pass; a red warning means fail.
• Lighthouse: Run an accessibility audit in Chrome DevTools. It flags elements below the required contrast ratio.
• axe DevTools: A browser extension that catches contrast failures plus many other accessibility issues.

Check contrast in all navigation states: default, hover, active, and focus. A link might pass in its default state but fail in its hover state if the hover color is lighter. Check against the actual background—if your header has a gradient or background image, measure against the darkest and lightest areas.

Fixing contrast without changing the design

Many store owners resist contrast fixes because they think it means making everything black and white. It doesn’t. Accessible contrast is about degree, not design overhaul.

If your navigation links are #999999 (ratio 2.85:1 on white), changing them to #595959 (ratio 7:1 on white) keeps the gray aesthetic while passing WCAG. If your header is a dark color, switching link text from a medium color to white or near-white often solves the problem.

For colored backgrounds:

• Dark backgrounds (navy, black, dark purple): use white or light text.
• Light backgrounds (white, cream, light gray): use dark text (#333333 or darker).
• Medium backgrounds: these are the hardest. Check both light and dark text options. Often you need to adjust the background slightly darker or lighter to create sufficient contrast with your text.

Focus indicators: what they are and why they’re removed

A focus indicator is the visual highlight that appears around an element when it receives keyboard focus—typically when a user presses Tab. Browsers provide default indicators: Chrome shows a blue outline, Firefox shows a dotted outline, Safari shows a blue glow.

Designers frequently remove these with:

*:focus {
  outline: none;
}

or on specific elements:

a:focus, button:focus {
  outline: 0;
}

The reason is almost always aesthetic—the blue ring doesn’t match the design. But removing the focus indicator without adding a replacement violates WCAG 2.4.7 (Focus Visible) and makes keyboard navigation impossible. The user tabs through the menu and can’t see which item is focused. They’re navigating blind.

Designing effective focus indicators

WCAG 2.4.7 (Level AA) requires a visible focus indicator. WCAG 2.4.11 (Level AAA, but increasingly expected) goes further: the focus indicator must have at least 3:1 contrast against the unfocused state and a minimum area of a 2px solid outline or equivalent.

Practical approaches:

Thick outline: A 2-3px solid outline in a contrasting color. Works on most designs.

a:focus-visible {
  outline: 3px solid #5c4db1;
  outline-offset: 2px;
}

Background shift: The focused element gets a distinct background color. Good for navigation bars where items are already styled as blocks.

nav a:focus-visible {
  background-color: #f0eeff;
  outline: 2px solid #5c4db1;
}

Underline plus color change: The link gains a thick underline and a text color change on focus. Subtle but effective for inline navigation.

nav a:focus-visible {
  text-decoration: underline 3px #5c4db1;
  color: #5c4db1;
}

The :focus-visible pseudo-class (supported by all modern browsers) applies focus styles only when the user is navigating with the keyboard, not when they click with a mouse. This addresses the common designer concern that focus outlines appear on mouse clicks—:focus-visible shows them only when they’re needed.

Non-text contrast: the requirement people miss

WCAG 1.4.11 (Non-text Contrast, Level AA) requires that visual elements essential for understanding content or UI have at least 3:1 contrast against adjacent colors. For navigation, this applies to:

• Active/current page indicators: A bottom border, background color, or text weight change that shows which page is active. If the only indicator is a slight color shift that doesn’t meet 3:1, it fails.
• Focus indicators: The focus ring or highlight must have 3:1 contrast against adjacent colors (both the element itself and the surrounding background).
• Icons used as links: A cart icon, search icon, or hamburger icon that functions as a button must have 3:1 contrast against its background.
• Form elements in navigation: A search input’s border must have 3:1 contrast against the surrounding background.

This criterion catches a common pattern: a “current page” indicator that’s a slightly bolder font weight or a marginally different shade. If the visual difference doesn’t meet the 3:1 ratio, users with low vision can’t distinguish the current page from other menu items.

The conversion case for contrast and focus

Higher contrast and visible focus indicators aren’t just accessibility requirements—they directly affect conversion:

Readability drives clicks. Navigation links that are easy to read get more clicks. A study by the Nielsen Norman Group found that users are significantly less likely to click on text they find hard to read. Low-contrast navigation links don’t just exclude people with disabilities—they reduce engagement from everyone.

Visible focus reduces drop-off. Keyboard users who can see where they are in the navigation are more likely to complete their journey. Invisible focus indicators create confusion—the user isn’t sure which link they’ll activate when they press Enter, so they become hesitant or give up.

Consistent visual hierarchy builds trust. Clear contrast between active states, hover states, and default states creates a predictable, professional experience. Inconsistent or barely-visible state changes make the navigation feel unreliable.

These aren’t accessibility-specific benefits. They’re usability benefits that happen to align perfectly with accessibility requirements. Fixing contrast and focus indicators is one of the rare cases where compliance, usability, and conversion all point in exactly the same direction.

This article is part of the larger guide on Navigation accessibility: why 15% of shoppers can’t use your menu.