WCAG 1.4.11 Color Contrast violation on hovered controls in Fluent Tester

[ksiler]

The hover background on some of the controls (button, context menu options, etc) do not meet WCAG 1.4.11 requirements for color contrast.

Success Criterion 1.4.11 Non-text Contrast (Level AA): The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s).

Environment Information

• Package version(s): (fill this out, include which package manager you're using)

• OS version: (fill this out if relevant)

• Platform:

  • iOS
    • Xcode version:
  • macOS
    • Xcode version:
  • win32
  • windows
  • android

Please provide a reproduction of the bug:

Open Fluent UI Tester and hover on one of the buttons. Inspect the color contrast of the hovered button with an adjacent color with AccessibilityInsights.

Actual behavior:

Color Contrast between hovered control and surrounding controls is 1.118.1

Expected behavior:

Color Contrast between hovered control and surrounding controls should be 3:1.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Low/Normal?

Products/applications affected: (if applicable)

[rurikoaraki]

#1030 should fix this issue

[rurikoaraki]

@ksiler would adding a border around the button on hover satisfy this requirement? (as long as the border is at least 3:1 contrast ratio?)

[ksiler]

@rurikoaraki I tried doing some research on this and it's possible I may have logged this bug in error after reviewing WCAG 1.4.11 requirements. Here are some key quotes I'm reading:

any visual information necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio

I think this would include hover but my question is: should we be looking at the contrast between the button's text and button's background for contrast requirements or the button's background and the adjacent color (the app's background) or both? They say "the information used to identify the control" must meet the minimum 3:1 contrast ratio requirement and if the button's text is all that's required to identify the component as a button, then we might be good?

Under "Active User Interface Component Examples", this button meets all requirements:

Buttons	A button which has a distinguishing indicator such as position, text style, or context does not need a contrasting visual indicator to show that it is a button, although some users are likely to identify a button with an outline that meets contrast requirements more easily.

and it has a pretty light background compared to the white background.

This checkbox with a subtle hover also meets requirements because they're comparing the contrast of the black border to the grey background (and not the grey background to the white background which is only 1.33:1).

Checkbox - Subtle hover style	A black border on a white background indicates the checkbox, when the mouse pointer activates the subtle hover state adds a grey background (#DEDEDE). The black border has a 15:1 contrast ratio with the grey background.

Considering the last example with checkbox, I think we might be good and don't need to change things at all?

[ksiler]

I think WCAG 1.4.11 becomes more crucial when considering controls where the only information used to identify it doesn't meet contrast requirements (like with icon buttons):

This github conversation also seems to agree that the contrast between the button's text and the background is all that's considered when checking for WCAG 1.4.11 (see example three on this page).

[rurikoaraki]

@ksiler Thanks for looking into this! If this is the case, I think I'll close out this issue. We can reopen it if it's still a problem.