Contrast Check: Possible False Positive

[mmichalek01]

Product

axe-core

Product Version

4.9.1

Latest Version

• [X] 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.