1912395 - Accessibility contrast checks do not properly register elements with backdrop-filter

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[shushdasher]

Attachment: codepen-screenshot-with-violation-info-in-frame.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0

Steps to reproduce:

write some basic html:
have a div with a light background-color, such as white
inside that div, another, this time without a background-color, but instead give it backdrop-filter: brightness(.2)
finally, inside that div, add some text that wouldn't contrast well with the first div, such as white.

This Codepen has an example of this bug: https://codepen.io/BasicallyWiz/pen/XWLaowm?editors=1100

Actual results:

I met a WCAG violation for text contrast. Firefox is comparing the text color to the background-color of the first div, completely ignoring the darkened div immediately underneath the text.

Expected results:

Firefox should have checked the contrast between the text and the immediate parent div, after the backdrop-filter has been applied, allowing WCAG standards to be met.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Glenn Watson [:gw]]

I'm not sure how / where the accessibility color check code is, but I assume it's done on the CPU somewhere during styling? This might be very difficult / tricky to make work, as the backdrop-filter is applied by the GPU, and the CPU has no idea what effect the filter chain will have on the pixels as it's accelerated and resides in GPU render targets late in the pipeline. Does this work correctly in Chrome / Safari?

Comment 3

[shushdasher]

I don't have access to a Safari browser, but testing on Edge, the same contrast bug seems to exist over in the chromium side of things as well.