Skip to content

3 Things - Tuesday, March 22

3 Focus State Facts

  1. Focus states need to have at least a 3:1 contrast ratio against the background color.

  2. All interactive components on a page need a focus state, not just buttons or links.

  3. Focus states cannot just be a color change. You need a dedicated visual indicator. This could be an outline, a highlight, any sort of shape or pattern that is different from the hover state.


courtesy of Dockyard ~ Designing for Accessibility: Focus States

Maggie Vaughan, CPACC
Content Marketing Practitioner