There isn't a rule for how much the colour should change for a
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:-
- Ensure you set the cursor to
cursor: pointer if it isn't already so that it is evident that the item is clickable.
- 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.
- A quick way to gain a decent colour change is to either add or subtract '2' from a hex value (so for example:
#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.