What are the hover state contrast requirements for drop down lists?
Question
I have a dropdown list with black text in a form. Does the background bar on the hover states as you hover over each selection option require a 3.1 contrast ratio against the white container background, or can I use a light gray background bar behind each selection for the hover states (such as #E6E6E6)?
Answer
According to WCAG Success Criterion 1.4.11, 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. This includes elements within dropdown lists, so they must have a hover and focus state that reaches a 3:1 contrast ratio with the background.
For more information on WCAG contrast requirements, check out the “Accessibility Concepts for Designers” course from Accessible Web Academy. Check out our online accessibility tools and WCAG testing software too!
