search

facebookincubator / infima

A UI framework that provides websites with the minimal CSS and JS needed to get started with building a modern responsive beautiful website
https://infima.dev
MIT License
408 stars 55 forks source link

Theme colors do not meet accessibility standards for color contrast #139

Open alliejones opened 3 years ago

alliejones commented 3 years ago

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 commented 3 years ago

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: https://github.com/facebookincubator/infima/pull/155

pixelass commented 5 months ago

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"

image