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

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.