You are here:

NYPL Design Toolkit

Version: 0.1.36

Visible Focus


  • At a minimum we should never use outline: 0, which removes default focus indicators.
  • Visible focus should work and be tested on smaller viewports as well.
  • The team could consider setting different focus styles for certain elements. For example changing the background color of inline links on focus.
  • If we refine the color of the focus indicator, it should have a contrast of 3:1 with the background, see the Standards section for more information on that.


WCAG 2.0, 2.4.7 Focus Visible

This is the success criteria requiring visible focus.

WCAG 2.1, 1.4.11 Non-text Contrast

WCAG 2.1 set a contrast ratio minimum of 3:1 for user interface components.
Reminder, you can test contrast ratios with tools like WebAIM’s Color Contrast Checker.


Additional resources which may be of interest.