-
Notifications
You must be signed in to change notification settings - Fork 741
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Color contrast should ignore overlapping elements that have transparent background #3464
Comments
We should look into restricting exactly what is ignored, as images or iframes that overlap won't have a background color but will interfere with the element. So possible solution is to ignore the element if it meets all of the following conditions:
|
It also can't have CSS filters, thick border, pseudo elements, embedded graphical content like img, canvas, object. There are a ton of ways in which something that at first glance may seem like an empty div, for it to have an impact on content that's behind it. I think that 9 out of 10 times when we see a transparent element on top of text content, it's there to have some kind of effect on things that are behind it. Why would people put completely empty divs on top of their content? |
A good example of this is the home page of https://arstechnica.com/. They use empty anchor tags with We could scope the requirement to ignore the element based on:
|
Another place this happens on is Material Inputs https://material.angular.io/components/input/overview. The inputs each contain a span which in turn contains the label element for the input. The span overlaps the input, but the label does not. Since the span itself has no background and no direct text children, we should ignore it as well. |
Validated with the latest develop branch code base, for the test script:
This snippet is giving an and with the below test script:
the ripple effect element that overlaps the button text, so it is passing |
I know this was closed some time ago, but is there any chance to revive #3583 in order to prevent incomplete tests? 😕 |
This was closed by mistake. We're going to look at this again. |
Thanks! 🙏 |
please, fix this! |
Take the following example:
This causes an incomplete result for color contrast because the
.overlap
element is on top of the<span>
element in the DOM stack. However since the.overlap
element has a transparent background it should just be ignored.This same problem happens with Material Button components due to the ripple effect element that overlaps the button text.
The text was updated successfully, but these errors were encountered: