SC 1.4.11 Non-text contrast and hover state

[sarasuri]

Hi,

I have a question on the visual change apply to a button on hover state and the SC 1.4.11. For example, the background colour within the button changes to #cfd1d5 when hovering over. Which doesn't meet the contrast ratio of at least 3:1 with its background #FFFFFF for non-text contrast on hover state. Does this fail the sc 1.4.11 as the button doesn't meet the contrast ratio 3:1 on hover state?

btn-default:hover { color: #335075; background-color: #cfd1d5; }

[patrickhlauke]

1.4.11 can't compare "the color that a thing was before with the color that a thing is now", as it's only concerned with adjacent pixels. this sort of question is more relevant for 1.4.1 Use of Color. and under that light, that hover color only serves as a bit of eye-candy. it's not essential, and doesn't convey any actual meaning/content.

[sarasuri]

@patrickhlauke Thank you for your response.
I understand what you saying. In this case, I am testing if the colour change at hover state for the button with its adjacent colour (#FFFFFF) and it doesn’t currently meet the minimum 3:1 color contrast ratio with its adjacent color and fails the SC 1.4.11 for non-text contrast at hover state.
However, there is some debate on whether SC 1.4.11 explicitly applies to hover state of user interface controls. The understanding of SC 1.4.11 primarily talks about keyboard focus states for such controls, not specific details about hover state. We are looking for further guidance to confirm if SC 1.4.11 applies to hover state.

Thanks

[patrickhlauke]

ah, sorry, I somehow misunderstood your initial question and thought you meant the contrast between the unhovered and hovered background colours.

looking at your actual question now, it's still not a failure of 1.4.11 - the button's background doesn't necessarily need to have contrast of 3:1 or higher against the white page background, if there are other hints (including position/context) that convey that it's a button. in this case, even if I couldn't see the button's background at all, that drop shadow, and the overall spacing etc around the label on the button, still gives me strong indication that it's a control of sorts, so the background colour there is not necessary for me to identify this ... and hence, not subject to 1.4.11

(as an aside - wondering why you were just worried about the hovered state, since the background of that button in its default state has even lower contrast against the white of the page? again, not a failure for the above reason, but just curious)

[sarasuri]

@patrickhlauke Thank you

The development team has brought up the question about whether SC 1.4.11 applies to hover state. This led to differing opinions within our Web accessibility testing team regarding whether a failure should be raised if the hover state doesn't meet the minimum 3:1 color contrast ratio. We want to ensure our interpretation aligns and that we're all on the same page.

Additionally, I have another scenario related to this topic. When hovering over icon buttons that don't meet the required ratio of at least 3:1, it could be considered a failure of the success criterion at hover state. For instance, the visual information necessary to understand the button's purpose might not be clear for some users. For example,

[patrickhlauke]

Well yes, that second scenario is a clear failure

[sarasuri]

@patrickhlauke Thank you again.
From the discussion, I would like to confirm whether my interpretations below are correct for the SC 1.4.11 and hover state.

Whether SC 1.4.11 applies to a control's hover state depends on context and the need for visual cues to understand its purpose.

• For controls such as icon buttons, checkboxes, radio buttons, and input fields without placeholder text, the visual change in hover state is required to meet the contrast ratio of at least 3:1 for users to perceive their purposes in that state.

• However, if a button includes text, the visual change at the hover state is not necessary to meet the minimum contrast ratio of 3:1 since users can understand its purpose from the text or other cues like a changed cursor or a border.