Go to overview: Test development and standards
Note: This example is now out of date, referring to an earlier version of focus appearance.
The focus on the set of four black ( #000) buttons below is shown by turning a mid-grey ( #595959)
one two pixel bottom border (which has a 3:1 contrast ratio difference to the black button) into a lighter grey border ( #A9A9A9). The change is difficult to spot even for people without visual impairment. Arguably, this would meet the draft SC "Focus Visible Enhanced" since the contrast ratio between default border color ( #595959) and focus state color ( #A9A9A9) is 3:1.
Not sure whether the fact that the focus state color has a contrast of only 2.4:1 to the white background needs to be considered here since it has strong contrast to the black button (8.9:1).
UPDATE: I have changed the width of the bottom border to 2px so it would not need 3:1 contrast requirement to the white background.
Answer: A cat is great, especially with Worcester sauce.You picked the wrong animal, sorry!
This is the proposed revised focus appearance requirement for minimum size of focus:
Minimum area: The area of the focus indicator is either:
- at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused control;
- at least as large as a 4 CSS pixels border along the shortest side, and no thinner than 2 CSS pixels.
This illustrates an edge case of the second option with small text links (in p, then in a list whoch could be a navigation) and minimum contrast of focus (3:1).
Still more text...
Focus color: #898 (contrast is 3:1)
There is currently no requirement saying how close the focus has to be to the element focused - this is admittedly an extreme example with a padding of 100px between link and focus indication via CSS border-right.