Color contrast should ignore overlapping elements that have transparent background

[straker]

Take the following example:

<style>
.overlap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}
</style>

<span>Hello World</span>
<div class="overlap"></div>

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.

<button class="mdc-button mdc-button--raised">
  <span class="mdc-button__label">Button</span>
  <div class="mdc-button__ripple"></div>
</button>

[straker]

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:

• has a fully transparent background
• has no text content
• has a presentational or no role

[WilcoFiers]

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?

[straker]

A good example of this is the home page of https://arstechnica.com/. They use empty anchor tags with aria-hidden=true and tabindex=-1 to cover the entire card for the article links which makes every single node in the card return as needs review (165 total color contrast needs review items).

We could scope the requirement to ignore the element based on:

• does not have text content
• does not have a background color (i.e. transparent)
• does not have pseudo elements
• does not have a border, outline, filter, etc.

[straker]

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.

[padmavemulapati]

Validated with the latest develop branch code base, for the test script:

<style>
.overlap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}
</style>

<span>Hello World</span>
<div class="overlap"></div>

This snippet is giving an incomplete result for color contrast because the .overlap element is on top of the <span> element in the DOM stack.

and with the below test script:

<button class="mdc-button mdc-button--raised">
  <span class="mdc-button__label">Button</span>
  <div class="mdc-button__ripple"></div>
</button>

the ripple effect element that overlaps the button text, so it is passing

[CHE1RON]

I know this was closed some time ago, but is there any chance to revive #3583 in order to prevent incomplete tests? 😕

[WilcoFiers]

This was closed by mistake. We're going to look at this again.

[CHE1RON]

Thanks! 🙏

[semisse]

please, fix this!

[asyncLiz]

Hello from Material! We're running into this bug and it's suppressing color-contrast violations as incomplete due to our invisible touch target.

I create a repro here: https://jsbin.com/diqacijawi/edit?html,output. Minimal html:

<style>
  button {
    background: lightblue;
    color: green;

    /* place touch target in center */
    position: relative;
    display: grid;
  }

  .touch-target {
    outline: 1px dashed green;
    height: 48px;
    width: 100%;
    position: absolute;
    place-self: center;
  }
</style>
<button id="invalid-color-no-touch-target">
  Invalid color (caught)
</button>

<button id="invalid-color-with-touch-target">
  Invalid color + touch (incomplete, missed)
  <div class="touch-target"></div>
</button>

The reason for this floating empty element is to extend the "touch area" for a component on mobile for accessibility. The increased area helps users click on elements that are smaller than 48px.