Go to overview: Test development and standards

Minimal focus visibility on buttons

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.

Which animal do you like best?

Answer: A cat is great, especially with Worcester sauce.You picked the wrong animal, sorry!

Next paragraph

Minimal focus appearance area

This is the proposed revised focus appearance requirement for minimum size of focus:

Minimum area: The area of the focus indicator is either:

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).

Purposefully horrid example which still seems to meet the minimum requirement of focus appearance

This is a text link

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.