Focus visible - testing version 3

A few examples of focus styles, building from version 2 intended to test the edges of the success criteria, and the 2px minimum requirement.

SC text

2.4.11 Focus Visible Enhanced (Level AA)

When a User Interface Component receives keyboard focus, all of the following are true:

• Minimum area: The focus indication area is greater than or equal to the longest side of the focused control times 2 CSS pixel.
• Focus contrast: Color changes used to indicate focus have at least a 3:1 contrast ratio with the colors changed from the unfocused control.
• Contrast or thickness: The focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS Pixels.

Note 1: A focus indicator that is larger than the minimum area may have parts that do not meet the 3:1 contrast ratio, as long as an area equal to the minimum does meet the contrast ratio.

Note 2: For a non-rectangular shape assume the smallest possible rectangle is drawn around the shape and use the longest side of that rectangle.

Buttons

Example 1 - no border, adding dark outline

No visible border, adding a dark outline on focus.

Example Example Example Example

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Pass

Example 2 - dark border, dark outline

Dark border, adding a dark outline on focus, which basically doubles the thickness:

Example 2 Example 2 Example 2 Example 2

• Size: pass
• Contrast of change: pass
• Adjacent contrast: fail, 1px next to a dark border

Overall: Fail

Example 3 - dark border, thick dark outline

Dark border, adding a 2px dark outline on focus:

Example 3 Example 3 Example 3 Example 3

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Pass

Example 4 - dark background, thin dark outline

Dark background, adding a 1px dark outline on focus:

Example Example Example Example

• Size: pass
• Contrast of change: pass
• Adjacent contrast: fail, 1px next to a dark background

Overall: Fail

Example 5 - dark background, thick dark outline

Dark border, adding a 2px dark outline on focus:

Example Example Example Example

• Size: pass
• Contrast of change: pass
• Adjacent contrast: ass, 1px next to a dark border

Overall: Pass

Example 6 - green background, thick blue outline

Dark border, adding a 2px dark outline on focus:

Example 6 Example 6 Example 6 Example 6

• Size: pass
• Contrast of change: pass
• Adjacent contrast: Pass, 2px

Overall: Pass

Example 7 - dark background, thin dark bottom outline

Dark background, adding a 1px dark outline on focus, bottom only:

Example Example Example Example

• Size: Fail, 1px on one side
• Contrast of change: pass
• Adjacent contrast: Fail, 1px next to a dark border

Overall: Fail

Example 8 - dark background, thick dark bottom outline

Dark background, adding a 2px dark outline on focus, bottom only:

Example 8 Example 8 Example 8 Example 8

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass, 2px

Overall: Pass

Example 9 - no background, thin dark bottom outline

No background, adding a 1px dark outline on focus, bottom only:

Example 9 Example 9 Example 9 Example 9

• Size: fail, 1px on one side
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Fail

Example 10 - no background, dotted outline

No background, adding a 1px dark dotted outline on focus:

Example 10 Example 10 Example 10 Example 10

Zoomed in view of 'dotted' in Firefox:

Note: The dotted outline appears to be roughly 25% coverage, i.e. 25% dark, 25% light grey (<3:1), 50% white pixels. That means the dotted focus indicator cannot provide sufficient size with the longest-edge times 2px measure.

• Size: fail?
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Fail?

Example 11 - no background, dotted outline

No background, adding a 2px dark dotted outline on focus:

Example 11 Example 11 Example 11 Example 11

Zoomed in view of 2px 'dotted' in Firefox:

Note: The dotted outline appears to be roughly 45% coverage, i.e. 45% dark, 5% light grey (<3:1), 55% white pixels. That means the 2px dotted focus indicator can provide sufficient size. I.e. 2px on the two longest sides, plus the indicator from the shorter side.

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Pass

Example 12 - no background, dashed outline

No background, adding a 2px dark dashed outline on focus:

Example 12 Example 12 Example 12 Example 12

Zoomed in view of 'dashed' in Firefox:

Note: The dashed outline appears to be roughly 50% coverage, therefore the dotted focus indicator can provide sufficient size.

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Pass

Example 13 - no background, 2px solid bottom border

No background, adding a 2px dark border on focus, bottom only:

Example 13 Example 13 Example 13 Example 13

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Pass

Example 14 - Dark inner background, inner outline

Dark inner background with inner outline:

Example Example Example Example

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Pass

Example 15 - Dark inner background, inner line

Dark inner background with inner outline:

Example Example Example Example

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Pass

Example 16 - Dark inner background, inner icon

Dark inner background with inner icon:

Example Example Example Example

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Pass

Example 17 - White card with outer focus

3 cards wrapped in a link so entire box is the component:

Some text, just a line to make up some description.

Link to another page

Some text, just a line to make up some description.

Link to another page

Some text, just a line to make up some description.

Link to another page

• Size:
• Contrast of change:
• Adjacent contrast:

Overall:

Example 18 - White card with outer focus

3 cards in a list with a link at the bottom of each card:

• 

  Some text, just a line to make up some description.

  Link to another page
• 

  Some text, just a line to make up some description.

  Link to another page
• 

  Some text, just a line to make up some description.

  Link to another page

• Size:
• Contrast of change:
• Adjacent contrast:

Overall:

Example 19 - Extended gradient

Standard button with extended gradient:

Example Example Example Example

• Size: pass
• Contrast of change: pass
• Adjacent contrast: pass

Overall: Pass

Example 20 - Inside outline

Created for the technique added for the new SC:

Example Example Example Example

• Size:
• Contrast of change:
• Adjacent contrast:

Overall:

Example 21 - Expanded hit area with wide outline

Having an inner visible button with expanded hit area, the grey dotted outline is just to show where the button's hit area is for the purpose of this example:

Example Example Example Example

• Size:
• Contrast of change:
• Adjacent contrast:

Overall:

Example 22 - Expanded hit area with narrow outline

Having an inner visible button with expanded hit area, the grey dotted outline is just to show where the button's hit area is for the purpose of this example:

Example Example Example Example

• Size:
• Contrast of change:
• Adjacent contrast:

Overall: