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)?
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):