Color contrast does not accurately assess overflow

[WilcoFiers]

This code causes a color contrast issue to be reported, even though the element with low contrast is hidden because of overflow. This type of thing can happen in carousels for example, when the opacity is reduced as the end state of a fade-out effect.

<style>
  .container {
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
  .foo * {
    width: 200px;
    height: 200px;
  }
  #two {
    color: #eee;
  }
</style>
<div class="container">
  <div class="foo" id="foo">
    <div id="one">hello</div>
    <div id="two">goodbye</div>
  </div>
</div>

[waabid]

Hi Wilco,

We're seeing the transition issue as well. Here's a simple codepen that can repro it: https://codepen.io/dbjorge/pen/mdRopqe

The related issue on our end pertains to a carousel specifically, here: https://github.com/microsoft/accessibility-insights-web/issues/4144

[WilcoFiers]

Unfortunately this hasn't quite made the cut for 4.3. We'll push it to 4.4.

[padmavemulapati]

Validated with the latest develop branch axe-core code base, the test script:

<style>
  .container {
    width: 200px;
    height: 200px;
    overflow: hidden;
  }
  .foo * {
    width: 200px;
    height: 200px;
  }
  #two {
    color: #eee;
  }
</style>
<div class="container">
  <div class="foo" id="foo">
    <div id="one">hello</div>
    <div id="two">goodbye</div>
  </div>
</div>

is passing color-contrast rule