Update floxdocs to be WCAG AA compliant

flox / floxdocs

Curated Flox Documentation

https://flox.dev/docs/

1 stars 0 forks source link

Update floxdocs to be WCAG AA compliant #5

Open zmitchell opened 8 months ago

zmitchell commented 8 months ago

Acceptance Criteria

floxdocs passes Axe plugin validation for WCAG AA
- change light pink color on light mode pages to #E5006E
- change text color to #1B1B1B from #666666
- Address aria label related issues

Original issue

The current typeface color is a mid-gray on a white background, which gives the text low contrast against the background. Low contrast is hard on people with poor eyesight. We should make the body text closer to black to make it easier to read.

ghudgins commented 7 months ago

I think this should get reshaped into "run the axe plugin on floxdocs and make accessibility updates where we are weak" and not be planned as a bug

zmitchell commented 7 months ago

I just ran axe on the page and 33 out of 43 issues were related to text contrast

ghudgins commented 7 months ago

looks like it's just triggering on the pink text and not the gray text though. and only in light mode. would be good to update this ticket with the findings from the plugin

ghudgins commented 7 months ago

@garbas do you know if we can pick different theme colors in light mode vs. dark mode? the main contrast issue is pink on white and it's really close to passing the contrast muster. we would want to pick a darker rose color from the brand guidelines for lightmode and, ideally, keep the current working color for dark mode.

cc @rossturk

garbas commented 7 months ago

Everything is possible to change, I think I chose the initial color from the design documents. I would only need somebody to select colors and then ping me to implement a change, it should be a fast change once we know which colors we want.

ghudgins commented 7 months ago

brand color to try in light mode only #E5006E

we should also try to address the other points from the plugin (there's a small handfull)

zmitchell commented 7 months ago

The current light mode body text is #666666, which has a contrast of 5.74 against the white background #FFFFFF. This passes the WCAG AA threshold of 4.5, but it fails the WCAG AAA threshold of 7. If we just use the brand color #1B1B1B for body text (the same color we use for the header) the contrast jumps to 17.2.

You can play around with contrast in this color checker: https://webaim.org/resources/contrastchecker/