axe-core-gems
axe-core-gems copied to clipboard
Contrast Ratio error, but the text element in question is on top of an image
- Link to live demo (if applicable)
- `axe-core-rspec` version: 4.2.1
- Testing with chromedriver, Chrome 93
I have a section that has a background image that is fairly dark. On top of this is a transparent p
that contains an a
with the text "Application Info`, which also has a transparent background -- that is, the background is very evident directly behind the text. The text itself is color #6dccf6. The image background is defined as
background: no-repeat top left / cover url(asset-path("hero-background.jpg")) #000000;
I get the error:
Selector: a[href="\#"]:nth-child(2)
HTML: <a href="#">Application Info</a>
Fix any of the following:
- Element has insufficient color contrast of 1.8 (foreground color: #6dccf6, background color: #ffffff, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1
But there is nothing behind the a
that has a background color of #ffffff. Incidentally, there is other text inside the p
that is color: #ffffff
and is not getting this error.
Why am I getting this specific error when I should not be?
Hey @jyurek just following up to see if this is still an issue with axe-core-gems 4.8.1