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?

dequelabs / axe-core-gems

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