This page examines various buttons for WCAG conformance, and demonstrates how, if it is determined that 1.4.11 requires a 3:1 contrast between default and hover states, this can be impactful on button design and usability.
UPDATE: It has been clarified that hover states are not covered by WCAG 1.4.11. These examples are maintained here for historical purposes.
Pass
This default button provide no or very little change on hover. It has a default focus indicator. As such, it passes 1.4.11 because "the appearance of the component is determined by the user agent and not modified by the author".
Pass or Fail?
Button 2 has 9.4:1 contrast to the background and to the foreground text. Like the default Button 1, Button 2 provides no color or contrast change on hover. Because the styling has been customized, is it now a WCAG 1.4.11 failure?
Pass or Fail?
Button 3 has 9.4:1 contrast to the background color and foreground text in the default state and 5.1:1 contrast ratio to the background color and foreground text in the hover state. There is a 1.9:1 contrast difference between the blue background colors of the default state and the hover state. Because the button is customized AND does not have 3:1 contrast ratio difference between default and hover states, is it a WCAG 1.4.11 failure?
It would seem odd that a button that provides no contrast change (Button 1 and, perhaps, Button 2) would conform, but a button that provides some contrast change would fail.
Using a blue (#00e) button color, there is no darker color that can be used on hover to provide a 3:1 contrast ratio to the default state (black provides only 2.2:1 to blue). So, a lighter button color on hover must be provided. However, there is no color available that can provide 3:1 to blue AND provide a 3:1 contrast ratio to the white background AND provide a 4.5:1 contrast to the white foreground text.
Passes 1.4.11, Fails 1.4.3
Button 4 has 3:1 contrast between default and hover states, 9.4:1 contrast to the background and foreground text in the default state, and 3.1:1 contrast ratio to the background color and foreground color in the hover state. It therefore passes 1.4.11 (>3:1 in all scenarios), but fails 1.4.3 (<4.5:1 between text and background) in the hover state.
Note that to determine conformance of this simple button, 5 different color/contrast combinations must be tested:
Passes 1.4.11, Fails 1.4.3
Button 5 has 3:1 contrast between the default foreground and hover foreground colors, 9.4:1 contrast to the page background in both default and hover states, but only 3.1:1 contrast between the hover foreground and hover background colors.
If one chooses instead to modify the text color rather than the background color, similar constraints are in place - any color that provides a 3:1 contrast difference from the default white can no longer meet 4.5:1 to the blue background.
In this scenario, 3 color/contrast combinations must be tested:
Passes
The only way to use a blue (#00e) default button color AND conform with WCAG AA is to change the background color and also invert the foreground color on hover.
Below are several other examples of buttons that have default colors extracted from popular material design systems (e.g., Google Material Design), but have been given hover state changes that meet a minimal 3:1 contrast difference from the default button color, and that also meet all other contrast requirements of WCAG. In all cases, the only way to provide this hover state contrast difference and also meet WCAG AA is to change both the foreground and button background colors (at least one very notably) on hover. If this page had a slightly off-white page background color, conformance would not be possible using any hover color combinations for several of these default color choices.
It is not clear if WCAG 1.4.11 requires a 3:1 contrast difference between default and hover states for non-default buttons that only use color/contrast to indicate the hover state. If it is determined that this is required by 1.4.11, then designers will be notably constrained in button design - either they must have very high levels of contrast in their default states (nearly black on white or white on black), or both foreground and background colors must change on hover. The former does not align with most site designs and the latter may be considered jarring and unappealing. Many designs (such as pages with non-white or non-black backgrounds) would be impossible to be made conformant. Alternatively, the buttons could be significantly re-styled, such as given borders or other non-color style changes on hover. This would not likely be acceptable in many designs. It is of note that Google Material design only recommends borders for "medium-emphasis" buttons.
Passes
This text box border has 1.6:1 contrast to the background, but 13:1 contrast to the text box itself. The text box has >3:1 contrast to its adjacent color, even though this is not a background.
Passes
This text box border has 7.5:1 contrast to the background, but only 2.8:1 contrast to the text box itself. The text box border has >3:1 contrast to the background color.
Passes
This button border has 21:1 contrast to the background in the default state. On focus, the border/focus indicator has 13:1 contrast with the button color and 1.6:1 contrast with the background color. As with Text box 1, the button has sufficient contrast to its adjacent colors in both default and focused states. Additionally, while color alone is used to identify the focus state, the focus indicator has >3:1 contrast from the default state.
Fails
The button has >3:1 contrast to the background, and introduces a very minor border color change on focus. The focus indicator/border does not provide 3:1 contrast to either the button color or the background.