Want to preface this report by saying I have tried to follow the work being done on testing text against backgrounds (in my case, a gradient) when they're applied via pseudo-elements and it sounds like it should work, hence me posting this bug.

I'm running axe-core through cypress-axe and running a base-level check on one of our pages. To verify the results I also run Firefox's accessibility inspector as well as the axe plugin (hooray cross verification!).

Our core pages include a large gradient banner with the title of the page over top in white: [Screenshot of design](https://p197.p4.n0.cdn.getcloudapp.com/items/bLu0RZ6N/Image%202020-12-07%20at%204.51.30%20PM.png)

cypress-axe was returning a "Serious" level failure, which fails the test, and returned the following:

```
failureSummary: "Fix any of the following:↵ Element has insufficient color contrast of 1.08 (foreground color: #ffffff, background color: #f6f6f6, font size: 45.0pt (60px), font weight: normal). Expected contrast ratio of 3:1"
html: "

Application configuration

This was a bit surprising as #f6f6f6 is the core site background which to me means axe-core isn't seeing the more closely related ::before that houses the gradient: [DOM sample screenshot](https://p197.p4.n0.cdn.getcloudapp.com/items/eDuwBE67/Image%202020-12-07%20at%204.55.33%20PM.png)

I get a matching failure in the axe browser plugin for Firefox, but Firefox's accessibility inspector itself is correctly identifying the gradient and testing against that: [Firefox a11y inspector success screenshot](https://p197.p4.n0.cdn.getcloudapp.com/items/Jruq6eqE/Image%202020-12-07%20at%204.57.16%20PM.png)

**Expectation**: Text against the gradient should be passing, or return 'needs review' at worst

**Actual**: Gradient background is being ignored and text is tested against the page background color

**Motivation**: The primary reason I wanted to log this is that the only way around this I've found is by disabling color-contrast checks when checking all pages. This is super far from ideal as contrast checks are a crucial part of the process. I thought perhaps the DOM layout of how we're structuring the page was the cause of failure, but FF's checker is able to "see" the gradient (unsure what they use internally) so I'm surprised axe is failing here.

Our app is mostly behind closed doors but I can try to replicate if need be but many of our issues stem from the way our app is setup and sometimes aren't possible to replicate outside of the environment (at which point we deal with oddities and move on). But I felt I should post this in case others have seen this happen or just to get more info on potential workarounds to this issue.

axe-core version: 4.0.2

extension version: 4.6.0

Firefox version: 83.0


cypress version: 6.0.1

cypress-axe version: 0.8.1

cypress Chrome version: 87