What are the contrast requirements for visible focus states?
Question
The UI components on my page receive a visible indication of focus but the visible focus indicator is not native. What are the contrast requirements for visible focus states?
Answer
When elements have a visual indication of the state they are in (focused, mouseover or selected), the visual indication must meet a 3:1 contrast ratio. Ensure that the focus (tab), hover (mouseover) and active states of interactive elements meet a contrast ratio of 3:1 against adjacent colors; so that they are distinguishable from other elements and allows users to identify user interface components.
Exception: Inactive components or where the appearance of the component is determined by the user agent and not modified by the author do not need to reach a 3:1 contrast ratio.
Accessible Web's WCAG Color Contrast Checker can be used to calculate the contrast ratio between different colors and detect if that ratio meets requirements for various WCAG success criteria.
For more information, the Accessible Web Academy course Accessibility Concepts for Designers includes in-depth discussion about creating accessible designs.
