axe-core-gems icon indicating copy to clipboard operation
axe-core-gems copied to clipboard

Contrast Ratio error, but the text element in question is on top of an image

Open jyurek opened this issue 3 years ago • 1 comments

  • 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?

jyurek avatar Sep 16 '21 18:09 jyurek

Hey @jyurek just following up to see if this is still an issue with axe-core-gems 4.8.1

michael-siek avatar Feb 05 '24 18:02 michael-siek