Focus visible - testing reverse colors (1 Feb 2021)

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.

Outlines