Focus visible - testing adjacent vs change methods

A few examples of focus styles, highlighting the difference between 'adjacent' methods and 'change' methods.

Multiple button in each are used so you get an idea of what it's like when tabbing through a real interface.

Black/white/grey is used to make these example extreme to test the logic. Using colors of various hues would make the indicators easier to see (with regular vision), but we want a difficult test!

Buttons

Example 1 - no border, adding dark outline

No visible border, adding a dark outline on focus.

Example 1 Example 1 Example 1 Example 1

• Adjacent colors (either): Pass, high contrast with component and background.
• Adjacent colors (both): Pass, high contrast with component and background.
• Change of color: Pass, dark outline replaces white background.

Example 2 - dark border, dark outline

Dark border, adding a dark outline on focus, which basically doubles the thickness:

Example 2 Example 2 Example 2 Example 2

• Adjacent colors (either): Pass, high contrast with background only.
• Adjacent colors (both): Fail, no contrast with component.
• Change of color: Pass, dark outline replaces white background.

Example 3 - dark border, light outline

Dark border, light (#ccc) outline on focus:

Example 3 Example 3 Example 3 Example 3

• Adjacent colors (either): Pass, high contrast with component only.
• Adjacent colors (both): Fail, little contrast with background.
• Change of color: Fail, dark outline replaces white background.

Example 4 - Outset

Dark border, dark outline fully outside the button using outline-offset: 2px:

Example 4 Example 4 Example 4 Example 4

Passes all.

NB: Same results for 'inset' as well.

Example 5 - Invert colours

Foreground and background colour inversion:

Example 5 Example 5 Example 5 Example 5

• Adjacent colors (either): Pass? I'm struggling to see how to evaluate this using adjacent colors.
• Adjacent colors (both): Fail, no contrast within component for the change.
• Change of color: Pass, black replaces light-grey background.

Example 6 - Invert colours plus border

Foreground and background colour inversion, with initial border:

Example 6 Example 6 Example 6 Example 6

• Adjacent colors (either): Pass? I'm struggling to see how to evaluate this using adjacent colors.
• Adjacent colors (both): Fail, no contrast within component for the change, the border has no contrast with the focused background.
• Change of color: Pass, black replaces light-grey background.

Example 7 - CurrentColor light background

Using the currentColor keyword in CSS so the outline has the same color as the text:

Example 7 Example 7 Example 7 Example 7

Passes all, same as example 1.

Example 8 - CurrentColor dark background

Same as example 7, but inverting the foreground/background color, so the white text (and therefore white outline) is invisible against the background:

Example 8 Example 8 Example 8 Example 8

• Adjacent colors (either): Pass, the white outline contrasts with the component background.
• Adjacent colors (both): Fail, does not contrast with the adjacent background.
• Change of color: Fail, white replaces white.

Inputs

Inputs do need a visual indicator, such as a border, so there are fewer options compared to buttons.

Example 10 - Black outline

Increasing the default contrast of the border (to pass non-text contrast), and adding a 1px dark outline on focus.

Name

Address

• Adjacent colors (either): Pass, the black outline contrasts with the adjacent background.
• Adjacent colors (both): Fail, does not contrast with the component.
• Change of color: Pass, Black outline replaces white background color.

Example 11 - Dark background and light outline

Creating an extreme black/white/grey version of the Gov.uk search box, the following inputs have a 2px light-grey outline on focus.

Example 11b - Dark background and yellow outline

Creating a less extreme version of example 11.

• Adjacent colors (either): Pass, the light-grey outline contrasts with the adjacent background.
• Adjacent colors (both): Fail, does not contrast with the component.
• Change of color: Pass, light-grey outline replaces black background color.

Example 12 - Dark background - inset light outline

Creating an extreme black/white/grey version of the Gov.uk search box, the following inputs have a 2px light-grey outline on focus.

• Adjacent colors (either): Pass, the light-grey outline contrasts with the adjacent background.
• Adjacent colors (both): Fail, does not contrast with the component.
• Change of color: Fail, light-grey outline replaces white component background.

Example 13 - Outline contrasts with both

Aiming to have a middle grey that contrasts with both the background and component. It works, but there is a super-narrow range of colors that this works for.

Passes all.