Go to overview: Test development and standards
focus is shown as 4px wide left border.
This text has font-size of 2em and line height of 2 and has a link and then goes on, and on and on and onand on and on and on and on and on and on and on and on and on and on and on and on and on and on and on
This text has font-size of 2em and line height of 1 and has a link and then goes on, and on and on and onand on and on and on and on and on and on and on and on and on and on and on and on and on and on and on
This text has font-size of 32px and line height of 1 and has a link and then goes on, and on and on and onand on and on and on and on and on and on and on and on and on and on and on and on and on and on and on
This text has font-size of 16px and line height of 1 and has a link and then goes on, and on and on and onand on and on and on and on and on and on and on and on and on and on and on and on and on and on and on
This text has font-size of 16px and line height of 2 and has a link and then goes on, and on and on and onand on and on and on and on and on and on and on and on and on and on and on and on and on and on and on
A huge link (64px, line-height: 1)
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!
Next paragraph
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).
More text...
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.