Implement color contrast accessibility test

vincerubinetti commented 1 month ago

accessibility.spec.ts currently has the following:

/** NOT WORKING YET https://github.com/StackExchange/apca-check/issues/143 */
registerAPCACheck("bronze");

// ...

      const { violations } = await new AxeBuilder({ page })
        /** https://github.com/dequelabs/axe-core/issues/3325 */
        .options({ rules: { "color-contrast": { enabled: false } } })
        .analyze();

See the two github issues linked there for full details. In summary:

We have disabled the standard "color-contrast" accessibility test, because it is frankly not very accurate or good. I want to replace it with the newer and better advanced perceptual contrast algorithm, but I'm having trouble integrating that StackExchange/apca-check library with Playwright.

This seems to be challenging to fix; see the first issue for problems I've encountered and what I've tried.

vincerubinetti commented 1 month ago

To ensure the test is actually running and catching errors, you could for example change the light-mode --black theme variable to #ffffff, which would definitely be a contrast violation:

valentina-buoro commented 1 month ago

hi @vincerubinetti can I work on this?

vincerubinetti commented 1 month ago

@valentina-buoro Please abandon work on this. I've deemed this infeasible/impossible. See the discussion here:

https://github.com/StackExchange/apca-check/issues/143

valentina-buoro commented 1 month ago

okay @vincerubinetti . Lighthouse seems like a good tool to test accessibility. Although doing it manually might be tedious.

vincerubinetti commented 1 month ago

Regarding Lighthouse testing, see this issue I created: https://github.com/JRaviLab/molevolvr2.0/issues/33

JRaviLab / molevolvr2.0

Implement color contrast accessibility test #22