You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
@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?
@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.
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?
Product
axe-core
Product Version
4.9.1
Latest Version
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.
The text was updated successfully, but these errors were encountered: