5

I'm a designer with a typical, basic understanding of accessibility.

My question is that is there an accessibility rule for the color contrast of a button that is in a normal state vs when it is in a hover state? I've tried looking for it but I'm having no luck. I'm using material design, however, the color of each state does not seem to have enough contrast between each other. enter image description here

  • 1
    Keeping in mind that colour contrast is not the only way to show a hover-over state, and also being mindful of your branding guidelines, it could be a good idea to explore other options. – Michael Lai Jan 15 at 23:18
2

There isn't a rule for how much the colour should change for a hovered state.

However it should still have a contrast ratio of 4.5:1 minimum for small text and 3:1 for large text. The button must still maintain a 3:1 minimum contrast ratio with it's surroundings as well.

With that being said there are a few best practices to follow:-

  1. Ensure you set the cursor to cursor: pointer if it isn't already so that it is evident that the item is clickable.
  2. A great way to ensure it is evident that the item is in it's hovered state is to make the button grow slightly (add 1px extra to the padding for example). As long as the button doesn't "jump around" on hover this subtle difference really helps.
  3. A quick way to gain a decent colour change is to either add or subtract '2' from a hex value (so for example: #31a4eb becomes #53c6fd, notice how 'e' became 'f' rather than wrapping around.). This is a quick way to add a decent change in contrast (assuming sufficient contrast is still maintained for text etc. hence why you either add or subtract 2 depending on your current colour)

For reference there is some advice on guideline 1.4.11 Non-text Contrast that isn't entirely clear but states a control must have a contrast ratio of 3:1 even in hovered state.

This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.

| improve this answer | |
  • I wanted to make a wee grammar correction but it was under the 6 char minimum. In the fourth paragraph, "For reference their is.." should read "For reference there is..." – C'est Moi Jan 18 at 11:34
  • correction made, cheers – Graham Ritchie Jan 19 at 23:27
  • By rule that Graham state above (1.4.11 non-text contrast) it is not required, but also note that accessibility guidelines intent is to increase benefits to users. Low vision users would find it hard to distinguish between default/hover state so it would be a good idea to indicate via multiple changes -- a color with 3:1 contrast ratio as well as underline so that people with color blindness or low vision can clearly see the underline. You might also apply these rules to when keyboard focus is received so it would be a good idea to consider keyboard focus along with hovering effect. – aditya Feb 9 at 17:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.