A few examples of focus styles, and pushing the boundaries of what this propsed SC will minimally allow. Totally inspried by Alastair's work.
The latest version being considered is:
Minimum area: The focus indicator area is either:
- at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component;
- at least as large as a 4 CSS pixels border along the shortest side of the unfocused component, and no thinner than 2 CSS pixels.
Change of contrast: The pixels making up the minimum focus indicator area achieve at least a 3:1 contrast ratio between their colors in the focused and unfocused states.
Adjacent contrast: The pixels in the minimum focus indicator area achieve at least a 3:1 against adjacent colors in the focused component or the minimum focus indicator area has a thickness of at least 2 CSS pixels.
Not fully obscured: The item with focus is not entirely hidden by author-created content.
No visible button border, adding a purple (#60F) 3:1 contrast 1px outline on focus.
Useful resource: Editor's Draft of 2.4.11 Focus Appearance (Minimum).