Closed IHIutch closed 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.
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)
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
Looks great!
Are the new underlines under links made on purpose? Not sure I like that particular change
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
@ryanleichty if you have a moment I'd love your eyes on this
Just deployed to staging for easy review
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.
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! 🎉
Fixes #148
Fixes a few other text color related issues I noticed while QA'ing