0

For example, on the Microsoft website, URL: https://www.microsoft.com/en-us/store/collections/surfacelist?icid=MSCOM_QL_Surface&headerid=department-surface, you see several product tiles that include the image of the product on a pale grey rectangle.

According to Accessibility Insights for Web/Contrast/UI components, any visual boundary that indicates the component's clickable area must have a contrast ratio of at least 3:1 again the adjacent background.

The pale grey rectangle that indicates the clickable boundary only has a 1.14:1 contrast ratio with the background. So, do these product tiles fail this criterion (WCAG 2.1, 1.4.11 Non-text contrast)?

Cat Ailanjian
  • 1

1 Answers1

0

I am an engineer on the Accessibility Insights team. This is a bug in Accessibility Insights for Web's Contrast > UI components requirement, tracked as microsoft/accessibility-insights-web #2809. The language Accessibility Insights is using for this requirement is more strict than WCAG 2.1 section 1.4.11 requires.

In particular, Understanding Success Criterion 1.4.11 contains specific language covering this case; its "Boundaries" section clarifies that because these widgets contain text with a 3:1 contrast ratio, and the text indicates the presence of the widget, it is not necessary for the boundary of the widget to have a 3:1 contrast ratio. To quote the guidance (emphasis mine):

Boundaries

This success criteria does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button or placeholder text inside a text input is visible and there is no visual indication of the hit area then the Success Criterion is passed. If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast.

Dan Bjorge
  • 1,514
  • 10
  • 10