Minimum color contrast evaluation fails (R37)

[ebalink]

This probably belongs to qw-element repo, but I thought it was more clear to write it here where the usage happens.

I've tested this with QualWeb core implementation as with QW Chrome plugin.

I've tested a Finnish web page https://avi.fi/asioi/henkiloasiakas

QW plugin reports a failure in text contrast for a dark blue (#00559F) heading "Ajankohtaista" on a light blue (rgba(0, 85, 159, 0.2) ) background. For the screen this seems to render (on a white background) as #CCDDEC. Which meas that the contrast ratio is 5.4:1 and the test should pass.
Font size is 2.125rem (34 px).

I assume that this is because the site uses quite an intresting solution for setting background colors.
It sets the background-color by using a :before pseudo selector for a parent element a few steps above:

(... )
.portlet-content:before {
    content: '';
    width: 100%;
    height: 100%;
    left: -100%;
    background: rgba(0, 85, 159, 0.2);
    position: absolute;
    top: 0;
}

It seems that they have a similar solution for the main title ("Henkilöasiakas") which is white on a blue background.
This element, though, has its own css rule for a transparent background.

.full-width.title-row .h1 {
    background: transparent;
    position: relative;
    padding: 2 rem 0;
    color: #fff;
    z-index: 0;
}

Reading the QW plugin report, it seems that QW skips this "Henkilöasiakas" title as it doesn't seem to exist in any of the result groups (passed, failed, warning, inapplicable).

This problem doesn't seem to exist in QW only, though.
WebAIMs plugin doesn't show error on the "Ajankohtaista" title but does on the Henkilöasiakas title. Chrome dev tools, on the other hand, isn't even able to calculate the contrast ratio for the Henkilöasiakas title.

[ebalink]

Actually, this might be related to using hsla or rgba values for background color with opacity.

Using this code will result a minimum contrast failure in QW Chrome plugin

<article style="background-color:#fff">
    <section style="background-color:rgba(100,195,205,0.08); padding:3em 1em">
        <p style="color:#006b67">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </section>
</article>

While changing the background color value to the hex value matching the composition of a semi-transparent layer on a white background results the test to pass.

<article style="background-color:#fff">
    <section style="background-color:#F3FAFB; padding:3em 1em">
        <p style="color:#006b67">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </section>
</article>