Update text color contrast

IHIutch commented 2 months ago

Fixes #148

Fixes a few other text color related issues I noticed while QA'ing

kentcdodds commented 2 months ago

This is awesome! I'm sure the team would appreciate some before/after screenshots to make this easier to review and merge.

IHIutch commented 2 months ago

Homepage before

Homepage after

Fakebooks before

Fakebooks after

Light mode docs before

Light mode docs after

Dark mode docs before

Dark mode docs after

Blog before

Blog after

(the color change here was actually unintentional, but now matches the docs)

IHIutch commented 2 months ago

In theory, you could take this a step further and remove antialiased from the body to help with perceived contrast https://github.com/Myndex/SAPC-APCA/discussions/28

Although there is some suggestion that it can be used in dark mode: https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/#please-stop-fixing-webkit-font-smoothing

machour commented 2 months ago

Looks great!

Are the new underlines under links made on purpose? Not sure I like that particular change

IHIutch commented 2 months ago

Yes, that is intentional. Even with the adjustments to the link color it does not satisfy the distinction between text and link color enough to pass without an underline. https://dequeuniversity.com/rules/axe/html/4.4/link-in-text-block

While, in theory, you could update the body text to stark black or white to create significant enough contrast from the link color, I'd argue that that distinction still doesn't feel like a great user experience for those with color blindness. This is why avoiding relying on color alone for elements such as these is useful.

I also didn't want to go overboard redesigning the site. Since underline is already used on hover, this felt appropriate.

Achromatopsia emulation without underline

Achromatopsia emulation with underline

brookslybrand commented 2 months ago

@ryanleichty if you have a moment I'd love your eyes on this

brookslybrand commented 2 months ago

Just deployed to staging for easy review

sergiodxa commented 2 months ago

Many mentions the underline on links, I just want to say that I'm 👍 to adding them, I always like when links have a proper underline and it's just more accessible, and a11y should be over aesthetics if they can't work together.

brookslybrand commented 2 months ago

Yeah, I don't really like the underlines either, and was going to push back, but since these are docs, and so largely textual content, I think the more clear the better. reactrouter.com is also already using underlines, so it also aligns them a little more.

We're likely going to be doing some redesigns at some point anyway, and this overall moves us in a better direction and closed an issue someone kindly opened up ~6 months ago

Thanks @IHIutch for tackling this one! 🎉

remix-run / remix-website

Update text color contrast #271