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

Applicability

All technologies that support 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 background color. This technique eliminates the need for multiple classes to ensure sufficient contrast of the focus indicator when viewed against different backgrounds.

The default focus indicators provided by browsers are typically one color, so they are highly visible when some components have focus and not well seen on other components. For instance, if a focus indicator is dark blue and a button is on a white background then it will be easily seen, but if the background is also blue it will not be easily seen.

Although it is possible to create individual CSS classes to address the different buttons across a site, this can be time consuming and easy to miss some types of interactive content. However, if the focus indicator is two colors - a light color and a dark color - then it will always have sufficient contrast against any background color. Currently, this can be done by combining the text-shadow property with the outline property on the focus indicator.

Developers may apply this technique to parts of the site where its hard to keep track of the focus indicator (such as when there are lots of different component colors). Developers can also provide a single-color focus indicator for components such as a navigation menus that are used across a site, have specific design requirements, and are easy to test and maintain.

If it can be determined that the two-color focus indicator CSS takes precedence then the test can be applied programmatically rather than by manually focusing on each interface component.

Examples

The examples demonstrate a simple implementation where focus styles are applied to all links and inputs. 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 light and dark dotted indicator

Description

*:focus {
	box-shadow: 0 0 0px 2px white;
	outline: dotted;
}

Working example of combining a dark outline and light text shadow

Example 2: A thicker light and dark indicator

Description

*:focus { 
	/* ensure high-contrast mode still has an indicator */
	outline: 2px transparent solid;

	/* Apply a thick yellow box-shadow with 
	   a thin dark blue indicator in the middle */
	box-shadow: 0 0 0 2px #F9F9D1, 0 0 0 4px #396196, 0 0 4px 8px #F9F9D1;
}

Working example of combining a dark outline and light text shadow

Other sources

No endorsement implied.

Tests

Procedure

For each focusable user interface element:

  1. Check that the two-colors in the focus indicator are adjacent and have a contrast ratio that is 3:1 or greater with each other.
  2. Check that the colors used contrast with the adjacent colors, or are at least 2 CSS pixels thick.

Expected Results

  • #1 and #2 are true.