Theme colors do not meet accessibility standards for color contrast

[alliejones]

Hi, I'm a very happy user of Docusaurus v2 and Infima (via the classic Docusaurus theme). Unfortunately the default theme colors, including the link text color and the background colors for buttons and badges with white text, don't meet the WCAG minimum color contrast standards. I used the built-in color contrast checking tools in Firefox to confirm this.

I'd love if this project could fix the contrast issues so the documentation generated with it was accessible to a wider range of people!

[slorber]

This PR can be the first stepping stone to a larger redesign, as it introduce new color variants that should pass WCAG tests with grade AAA: #155

[pixelass]

Some of them are really bad, especially yellow, but this can luckily be fixed by adjusting colors by overwriting the css variables.

If anyone is interested in a homogenous colorscheme that allows black and white on the 500 shade (preferring white) and offers 10 colors you can check out our color scheme: https://blib.la/design-system which was designed with an accessibility first approach (AA standard).

Sadly I don't have the time to create a PR myself ATM but this should allow anyone willing to invest some time to have a nice starting point.

@slorber If you are interested, you can find the palette here: https://github.com/blib-la/blibla-template/blob/main/src/ions/theme/palette.ts

Note

We also have an npm package that exports the palette but it's still a pre v1 release, though the palette is very unlikely to change: https://github.com/blib-la/captn/blob/main/packages/theme/src/palette.ts

npm install @captn/theme

import {palette} from "@captn/theme/palette"