Does an element’s hover state have to reach 3:1 contrast ratio?


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)?


Under the WCAG Success Criterion 1.4.11: Non-text Contrast, the gray bar that shows the hover state is not required to reach 3:1 contrast with the white background. One reason for this is that the position of the pointer device, such as the mouse cursor, also helps visually indicate which element has hover.

However, some users will still better understand the interaction if the gray bar is easy to perceive. So even though it's not required under WCAG, including a bar or border on hover that reaches 3:1 contrast will help provide a better experience.

Your question focused on the hover state, but a quick note on keyboard focus states. If the gray background bar is the only indication of keyboard focus (remember, there will be no pointer giving additional visual information), then the gray background bar must reach 3:1 contrast with the white background to conform with WCAG 2.1 AA.

In both cases, remember that the text must always reach 4.5:1 for normal font or 3:1 for large font against its background.

For additional help identifying color contrast values, visit the WCAG Color Contrast Checker from Accessible Web.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.