Non-text Contrast - Focus styles

A few examples of focus styles, mainly for outlines, to inform discussions.

Example 1 - Default

A simple button, no styles, varies considerably by browser:

Example 1

Example 2 - Default

A simple button, flattened most styles (border = 1px #333 solid) but didn't touch focus-outline or focus-inner:

Example 2

Example 3 - no border, adding dark outline

No visible border, adding a dark outline on focus.

Example 3

Pass - high contrast with button background and page background.

Example 4 - dark border, dark outline

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

Example 4

Pass? - Changes the shape of the component, adding a 1px extra to the border.

Example 5 - dark border, light outline

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

Example 5

Fail? - Not sufficient contrast with page background to change the shape of the component.

Example 6 - Outset

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

Example 6

Pass - Changes shape and the outline contrasts against all adjacent colors.

Example 7 - Inset

Dark border, dark outline fully inside the button using outline-offset: -3px:

Example 7

Pass - Outline contrasts with the adjacent colours.

Example 8 - Inset, but only just

Dark border, dark outline fully inside the button using outline-offset: -3px:

Example 8

Pass? - Tricky, but conceptually very similar to example 4, increasing the thickness of the border changes the component...

Example 9 - no border with very inset outline

No border, well padded, dark outline fully inside the button using outline-offset: -5px:

Example 9

Pass - Outline contrasts with the adjacent colours.

Example 10 - Invert colours

Foreground and background colour inversion:

Example 10

Pass - no change of shape, but contrasting change of foreground and background.

Example 11 - Change background colour

Subtle background colour change:

Example 11

Fail - no change of shape, contrast change does not meet 3:1.

Example 12 - Change border inside the component

The outline is adding inside the component, effectively changing it's shape:

Example 12

Pass - change of shape.

Example 13 - Change border inside the component

The outline is adding inside the component, but without contrast so NOT effectively changing it's shape:

Example 13

Fail - no change of shape.