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!

The different methods of testing are for:

• Adjacent colors (either): The changed pixels (e.g. outline) are measured against either/any adjacent colors.
• Adjacent colors (both): The changed pixels (e.g. outline) are measured against both/all adjacent colors.
• Change of color: The changed pixels (e.g. outline) are measured against the pixels they are replacing.
• Change of color & spacing: Same as above, but as per the draft SC if the changed pixels are adjacent to the component it needs to have 3:1 with the color of the component, or be at least 2px wide.

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.
• Change of color & spacing: Pass.

Example 1b - no border, adding dark outline on a dark background

Example 1c - no border, adding minimal dark outline

No visible border, adding a dark outline on focus that just meets 3:1 with white.

Example 1c Example 1c Example 1c Example 1c

Same as example 1 (passing), but at the minumum threshhold.

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.
• Change of color & spacing: Fail, 1px dark outline around a dark border.

Example 2b - dark border minimum

Dark border, adding a minimum contrast dark outline (#949494 with 3:1 against white) on focus:

Example 2b Example 2b Example 2b Example 2b

Same results as example 2, but just showing what the minumum would look like.

Example 2c - dark border minimum

Dark border, adding a minimum contrast dark outline (#949494 with 3:1 against white) on focus:

Example 2c Example 2c Example 2c Example 2c

Same results as example 2, but just showing what the minumum would look like.

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, light outline replaces white background.
• Change of color & spacing: Fail, light 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 4b - Outset minimum

Dark border, dark outline fully outside the button using outline-offset: 2px, but using #949494 with 3:1 against white:

Example 4b Example 4b Example 4b Example 4b

Same results example 4, just showing the minumum contrast.

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.
• Change of color & spacing: Pass, black replaces light-grey background and over "2px wide".

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.
• Change of color & spacing: Pass, black replaces light-grey background and over "2px wide".

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.
• Change of color & spacing: Fail.

Example 9 - Dark component with minimal outline added

Dark component, focus is a 1px grey outline (3:1 with white) outset by 1px:

Example 9 Example 9 Example 9 Example 9

Same as example 4 but dark component and minimal outset outline used.

Example 9b - Dark component with 2px dark outline

Dark component, focus is 2px outline matching the component color:

Example 9b Example 9b Example 9b Example 9b

Same as example 9 but 2px border used instead of outset (to pass current SC text).

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.
• Change of color & spacing: Fail, black outline replaces white background color but no separation from the input border.

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.

• Adjacent colors (either): Pass, the grey outline contrasts with the adjacent background.
• Adjacent colors (both): Fail, does not contrast with the component.
• Change of color: Pass, light outline replaces dark background color.
• Change of color & spacing: Pass, light outline replaces dark background color and 2px thick.

Example 11b - Dark background and yellow outline

Creating a less extreme version of example 11.

(Same results as 11.)

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.
• Change of color & spacing: 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, being 2px and contrasting with both the component and background.

Example 15 - comparing sizes of indicator

Four examples showing a 1px outline, a 1px bottom-only outline, 2px extra bottom border, and 5px left border.

Example 15a Example 15b Example 15c Example 15d

All of these pass the draft SC text.

Example 16 - plain text links

Link 1 Link 2 Link 3 Link 4