Question: WCAG 2.1 - Non Text Content on Hover and Focus Highlighting

[TheUntamed]

Hello everyone,

I have a question regarding the requirements for visual changes and indicators for non text content on hover and focus.
There is the criteria "1.4.13 Content on Hover and Focus", but that's about content that shows up on hover/focus.
My question is about what the requirements are for color/contrast changes or indicators like the change of the cursor, a border etc.

Let's take a button as an example. The criteria "1.4.11 Non Text Contrast" and "1.4.1 Use of Color" already give some guidance. For idle buttons the inside of the button has to have a sufficient contrast to the surrounding area around the button or the border of the button has to have a sufficient thickness and contrast to the outside and inside area. (So far so correct?)

Now if I hover/focus the button what are the requirements? I suppose the button still has to fulfil the contrast requirements like described above while also having a change strong enough to identify that the button is hovered/focused. Of course if the button didn't have a border before I could add one on idle/hover as an indicator, but what if I don't want that?

1. Is a change of the cursor enough as an indicator for hover?
2. If the color of the button changes, does the new color need to have a sufficient contrast to the one the button has on idle?

Some simple examples from Github and Deque Systems website:

(Is this enough contrast as an indicator for hover?

(Or does it have to be more like this? Do the blue and white have to have a contrast of 3:1 (4.5:1)?)


(Let's assume the button would stay blue and just the text would turn black, would that also be enough?)

[JAWS-test]

There is a clear distinction between focus with keyboard and hover with mouse.

• For focus with keyboard there is a requirement that the focus indicator must have a contrast of 3:1 to adjacent colours.
• For hover with mouse there are no requirements. For hover, according to WCAG, there is no need to change the display and if a change is made, it does not need to meet any contrast requirements.

For focus and hover, however, the contrast in the element itself must still be sufficient (4.5:1 for text, 3:1 for graphics), regardless of whether or not a visual change is made to the element during focus or hover.

[JAWS-test]

The discussion section is intended for such questions. Please do not open an issue for this