Skip to content

Color-contrast inconsistency of bgOverlap message #3309

@WilcoFiers

Description

@WilcoFiers

The code to detect overlap only works when an element is scrolled into view. This isn't at all necessary, and is a hold-over from before axe-core was using a grid to test color-contrast. You can tell by looking at something like the following, which reports #target as overlapped when scrolled into view, but ignores the overlapping element when it's not in view.

<div style="height: 1em; overflow: auto; background: cyan;">
  <div style="background: rgba(0,255,255,0.6); margin-bottom: -1em; height: 1em; position:relative;"></div>
  <div id="target">foo</div>
</div>

I haven't seen this produce false positives, but in theory it can. The more problematic part is that it changes the result, based on where in the page the scroll happens.

Metadata

Metadata

Assignees

No one assigned

    Labels

    color contrastColor contrast issuesfixBug fixesprA pr has been created for the issue

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions