‘Focus Appearance (Minimum)’ requires that focus indicators are clearly distinguishable when active.
Focus indicators help users see which element on a page currently has focus, they are especially useful for people with low-vision, memory or mobility impairments.
Where a focus indicator is used to show an element has current focus, it must be clearly visible and distinguishable. This goes beyond earlier guidance to ensure indicators are visible and have contrast between focused and unfocused states.
How to Pass ‘Focus Appearance (Minimum)’
When a component receives keyboard focus:
- The focus indicator has a contrast ratio of at least 3:1 between focused and unfocused states;
- The focus indicator has a contrast ratio of at least 3:1 against adjacent colours;
- The element within focus isn’t hidden; and
- The focus indicator area:
- Has an outline that’s at least 1 CSS pixel thick; or
- Has a shape that’s at least the area of a 4 CSS pixel-thick line;
‘Focus Appearance (Minimum)’ Tips
It may sound basic, but a thick black border around an element when it receives focus will often do the trick (unless your website has a very dark background colour of course).
You could also change the background colour of the whole element on focus.
If you’re worrying about pixel sizes, your indicator probably isn’t clear enough – keep it simple.
- Non-Text Contrast
- Focus Visible
- Focus Appearance (Enhanced)
- Understanding Success Criterion 2.4.11 (W3C)
Free Developer Resources
Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.