Focus state

When to use the focus state

You must apply the focus state to all interactive elements. This will help make our websites accessible to as many people as possible can use them.

Do not rely on the browser focus state

You must not rely on browser focus states as they may not meet accessibility standards.

How focus state works

To meet the criteria for Web Content Accessibility Guidelines (WCAG) 2.2 AA focus appearance we:

• use two focus rings
• change an elements background colour
• change the colour of any text or icons

This lets us provide a consistent focus state experience that works with a range of colours.

The focus rings

The focus state is made up of two 2px rings, one in black and one in mint. This ensures that it is accessible on different colour backgrounds because at least one of the rings will meet the minimum contrast ratio.

Background, text and icons

To ensure the focus state meets the minimum colour contrast radio against any adjacent colours:

• any background colour(s) will change to white
• any text and icons will change to black

Text decoration

When applying the focus state to a text element, any text decoration is removed to reduce the amount of visual noise. For example, an underline on a link. This creates another visual change that can help users with visual impairments identify the element that has focus applied to it.

How to use the focus state

In most instances applying the focus state should be quite straightforward. But there are some instances where it might need to be applied slightly differently.

Standard application of the focus state

The standard way to apply the focus state places the rings outside of an element.

To apply this use p-focus--general.

Applying the focus state inside an element

If applying the focus state outside the element risks it being hidden by other elements then you can apply it to the inside of the element instead.

We have applied this technique to the primary navigation.

To apply this to your element use p-focus--inset.

Applying the focus state to an element with a border

When applying focus to an element that has a border you can change the colour of the border to black to create the inner ring.

This only works if there is a minimum of a 3:1 contrast ratio between the colour of element’s default state. If the change in colour is less than a 3:1 contrast ratio then you must apply the focus state outside of the element. We have applied this technique to all the form elements.

To apply this to your element use p-focus--element-with-border.

If changing the border to black does not meet the minimum contrast ratio then you should:

• change the existing border to white on focus
• apply the focus rings to the outside of the element

Checking colour contrast

It is important that:

• at least one of the focus rings has a minimum of a 3:1 colour contrast ratio against any adjacent colours
• there is a minimum of a 3:1 contrast ratio between the colour of the element’s default state and the colour it changes to when focused

You can use the WebAIM colour contrast checker to check your colour combinations.

Colours that work with focus state

The following colours work with the focus state when used as background:

• Commons
• Deep Purple / UK Parliament brand
• Grey 3
• Grey 4
• Grey 5
• Grey 6
• Lords
• Westminster White
• White