Contrast Check: Possible False Positive

[mmichalek01]

Product

axe-core

Product Version

4.9.1

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Hey all,
Im trying to figure out why axe keeps highlighting some elements as contrast issues.
We are setting up the page in Puppeteer + Chromium.
We're waiting for all the external CSS to load and apply before running axe.

I've double-checked that the correct color is on the element.
.getComputedStyle(element).color --> { color: 'rgb(255, 255, 255)' }
but Axe is highlighting a color that is overridden by another selector.
The color #9e2b44
The result of the contrast check:
[
'#9e2b44',
'#1a1a1a',
2.38,
'13.5pt (18px)',
'normal',
null,
'4.5:1',
null
]

Expectation

Not highlight the issue as its #fff on #1a1a1a

Actual

Highlight the issue as ##9e2b44 on #1a1a1a

How to Reproduce

The link to the example page https://fryar-risk-center.uada.edu/about/
The xpath to the problematic element //ul[@id='et-secondary-nav']/li[1]/a
Load the page into the headless browser and run axe.

Additional context

I'm not sure why the Axe prefers the style from the internal CSS.

[WilcoFiers]

@mmichalek01 I'm afraid I'm not able to reproduce the issue. I can find the element in the page you shared, but I'm not getting any color contrast violations from axe, and only one needs review from the hero text on its background image. Can you help?

[mmichalek01]

@WilcoFiers
Sure, always happy to help. Have you tried it with running axe programmatically or with a browser extension?
Because when I run axe from dev tools, no problems are found.

[mmichalek01]

@WilcoFiers Any update on this? Do I need to provide more information?

[marktnoonan]

I was curious about this so I tested the page you linked with the cypress-axe package, which injects axe programmatically, it found no color contrast error. I get the same result headed and headless - just a best-practice failure for that secondary menu node not being in a landmark.

We're waiting for all the external CSS to load and apply before running axe.

It's probably necessary to get a reproduction of the exact conditions. Does the problem persist if you add an arbitrary wait before running axe? Could you make a repo that demonstrates the problem?