Evaluate automated testing for color contrast / deficiencies

[swissspidy]

Task Description

Ensuring high color contrast (WCAG AA) was previously mentioned as a requirement.

How can we do this in an automated fashion?

[barklund]

Given that we already have @storybook/addon-a11y added to our storybook setup, which among other things test for contrast, could we perhaps use this in some way? Can you run Storybook headless-ly for just the tests?

[swissspidy]

I think so. There‘s https://www.npmjs.com/package/@storybook/addon-storyshots-puppeteer that allows running aXe against storybook stories

Also interesting: https://docs.percy.io/docs/storybook. I think Marcin experimented with that in #4145

[swissspidy]

Interestingly aXe support there was added specifically because of Gutenberg, but Gutenberg has since stopped using it:

WordPress/gutenberg#21485
WordPress/gutenberg#21626

Perhaps easier to just use #4778 for this?

@storybook/addon-a11y is based on aXe too anyway

Not sure how to test for things like color blindness though. Maybe we just do that manually for now?

[swissspidy]

I think it's easier to do this in the karma tests instead of adding yet another test suite that just uses aXe under the hood anyway.

I'll try to cover this in #4020.