What are the contrast requirements for an element’s focus, mouseover & select states?
Question
Answer
When designing an interactive element, it needs to meet 3:1 contrast ratio with adjacent colors. You need to maintain 3:1 contrast ratio during all of that elements states (focus, hover, active, etc). The requirement doesn’t mean that states need to contrast 3:1 with each other. For instance, an element's hover state does not need to contrast 3:1 with its focus state, or even its resting state. Requirements like this are beginning to take shape with WCAG 2.2, 2.4.11 Focus Visible (Enhanced). For now, you just need to make sure that each state of an element meets the 3:1 contrast ratio with adjacent colors, and are “distinguishable enough” from each other so users are aware of their interactions with the element (focusing, hovering, etc).
Looking to learn more about how to test an elements color contrast, click here!
Additionally check out our WCAG color contrast checker!
