Linear gradient backgrounds are misclassified as a background image

[rbairwell]

Using the test code:

<style>
    .test {
        background: linear-gradient(180deg, #f6f6f6 0, #e9e9ea);
    }
</style>
<div class="test">
    Background
</div>

shows (at least AAA check) the message "Warning: This element's text is placed on a background image" under 1.4.6#G17 however using a standard solid color:

<style>
    .test {
        background: #ffccaa;
    }
</style>
<div class="test">
    Background
</div>

does not produce this warning.

[ironikart]

Sorry for taking a while to get back to this. I'm not able to replicate with your test snippet. When I look at the code for testing the background I can see it's also checking parent elements & pseudo elements (e.g. :before). Perhaps one of those has a background image?

The background image detection isn't terribly smart in the code, it's just checking whether it has the css property background-image and it's value isn't 'none'.

[johngnapp]

Is this because of the intrinsic CSS properties that are set by the two different CSS statements? background: #ffccaa is setting the background-color property, whereas background: linear-gradient() is setting the background-image property.

In this instance I think the accessibility test is correctly raising a warning that there may be contrast issues because a background image is being used (ie a gradient fill rather than an actual image).

[ironikart]

I agree @johngnapp. Given that we haven't got any more feedback I'm going to close this off.