Implement color contrast accessibility test

[vincerubinetti]

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]

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]

hi @vincerubinetti can I work on this?

[vincerubinetti]

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

StackExchange/apca-check#143

[valentina-buoro]

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

[vincerubinetti]

Regarding Lighthouse testing, see this issue I created: #33