Skip to content

Technique C40:Creating a two-color focus indicator to ensure sufficient contrast with all components

Applicability

CSS.

This technique relates to:

Description

The objective of this technique is to create a two-color focus indicator that has sufficient contrast against any solid background color. This technique can avoid the need for multiple classes to ensure sufficient contrast of the focus indicator when viewed against different backgrounds.

Authors may apply this technique to sites that use a variety of different colored backgrounds. Although it is possible to create different colored focus indicators for different parts of a page, this can be time consuming and it can be easy to miss some components. However, if the focus indicator uses two highly-contrasting colors - a light color and a dark color - then the same indicator can be re-used, since at least one of the two colors will always have enough contrast against any background color.

As long as the two indicator colors have a contrast ratio of at least 9:1 with each other, at least one of the two colors is guaranteed to meet 3:1 contrast with any solid background color.

This technique only guarantees that an indicator will pass if the entire indicator is drawn over the background, not within the boundary of the focused component, and if the entire background behind the indicator is one single, solid color. For example, if the background is an image or gradient, or if the indicator is partially overlaid on top of a different UI component, it may still be necessary to compare the indicator pixel-by-pixel against the background.

In CSS, two-color indicators can be implemented by combining the outline and box-shadow properties with the :focus or :focus-visible pseudo-classes.

Avoid setting outline: none to use box-shadow on its own. User agents commonly suppress the box-shadow property in forced-color modes, so authors should avoid relying on box-shadow alone to implement focus indicators. If box-shadow only styling is required, consider combining it with an outline: 2px transparent solid property to ensure compatibility with forced-color modes.

Examples

This example demonstrates a simple implementation where focus styles are applied to all focusable components. In use on a more complex website care would need to be taken that these styles are not overridden by more specific styles.

Example 1: A thick two-color indicator

In this example, the indicator consists of two solid bands of color. Because each color band is 2 CSS pixels thick, either color band is large enough to meet the minimum indicator size requirement on its own. As long as one of the two colors has 3:1 change contrast with the pixels behind and around the focus indicator, the indicator will satisfy both the Focus Appearance and Non-Text Contrast success criteria. 

*:focus {
	/* inner indicator */
	outline: 2px #F9F9F9 solid;
	outline-offset: 0;
	/* outer indicator */
	box-shadow: 0 0 0 4px #193146;
}

Working example of a thick two-color indicator

Other sources

No endorsement implied.

Tests

Procedure

For each focusable user interface component:

  1. Check that the two colors in the focus indicator have a contrast ratio that is 9:1 or greater with each other.
  2. Check that each color band is at least 2 CSS pixels thick.
  3. Check that the indicator only appears overtop one solid background color at a time.

Expected Results

  • #1, #2, and #3 are true.
Back to Top