pa11y can't deal with transparent background (rgba)

[brentguf]

Hi,

pa11y reports contrast ratio violations whenever we have text on a transparant background color, using an rgba value to determine this background color. It can't seem to deal with colors that have an alpha value of <1.

This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio
of 1:1. Recommendation: change text colour to #fefeff.

Could you add the possibility to have transparent backgrounds and still pass this test?

Thanks!

[brendaneross]

Seconding this, and improve the contrast message by outputting which two colors are being compared.

[brendaneross]

Also, the color conversions need to be updated to allow for 8-digit hex codes.

[joeyciechanowicz]

Pa11y doesn't itself run the accessbility tests, those are handled by HTML Code Sniffer. We've recently updated the version of HTML-CS used, which may have fixed the issue. However we are yet to publisha new version.

[skudrua2019]

Pa11y doesn't itself run the accessbility tests, those are handled by HTML Code Sniffer. We've recently updated the version of HTML-CS used, which may have fixed the issue. However we are yet to publisha new version.

Hi, could you clarify what exactly version of HTML code-sniffer is Pa11y using? And does his version support WCAG2.1?

[josebolos]

Hi @skudrua2019,

Pa11y is currently using the latest published version of the html_codesniffer npm module (v2.4.1) which, as far as I know, still doesn't include support for WCAG 2.1 rules.

[skudrua2019]

Hi, Code Sniffer has released the version 2.5.0 https://www.npmjs.com/package/html_codesniffer And this new Code sniffer version supports WCAG2.1. Could you please clarify when Pa11y is going to use Code 2.5.0? Thank you. Best regards, Svetlana Kudrya From: Jose Bolos <notifications@github.com> Sent: Monday, March 23, 2020 5:39 PM To: pa11y/pa11y <pa11y@noreply.github.com> Cc: Svetlana Kudrya <Svetlana.Kudrya@dataart.com>; Mention <mention@noreply.github.com> Subject: Re: [pa11y/pa11y] pa11y can't deal with transparent background (rgba) (#442) Hi @skudrua2019<https://github.com/skudrua2019>, Pa11y is currently using the latest published version of the html_codesniffer npm module (v2.4.1) which, as far as I know, still doesn't include support for WCAG 2.1 rules. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#442 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANYBMHAQD5EH6QKX7W3IBUTRI57B3ANCNFSM4GQEV23Q>.

[Ruluk]

Hello! From my tests, it seems that Axe handles transparency correctly in color contrast evaluation. In the last version, Pa11y supports the Axe runner, so you should give it a try.

[josebolos]

As discussed previously, pa11y offers two reporters (HTML_CodeSniffer and axe) and we're at the mercy of what issues they can detect, so this is something that unfortunately we won't be able to fix ourselves.