Left navigation bar highlight colors are not a11y/colorblind friendly <3

[magicmark]

Hi!

First off - I love using tailwind, thanks to everyone involved in this project :)

Minor thing when browsing through the docs - I didn't even realize that the sidebar highlighted what page I was on, the background / text colors don't look super different to me:

I'm mildly color blind, so some anecdotal evidence/data point of one - the distinction between the selected/not selected state is too subtle for me to see any difference without zooming in / squinting really hard.

I'd recommend something with a bit more contrast:

(Using text-teal-800 / bg-teal-500 - although I'm not a designer and this isn't wcag complaint, so you probably don't want these colors exactly)

Bonus points for using something non-color related to distinguish state, such as bold text or background pattern, for those even more color blind than I :)

Anyway - thanks so much for considering this! Happy to send a PR, but i'm terrible at design, not sure what the actual colors should be 😬

EDIT: I just noticed the opacity-25 over these divs, which was confusing me - so my color suggestions above are taking that into account. Why do we set opacity-25?

[simonswiss]

Hey!

Thanks for flagging this. We are actually looking at doing a website visual refresh internally, and we'll definitely take this into consideration for the new version! 👍

[simonswiss]

Moving this to discussions, as we're trying to keep issues for bugs and documentation errors primarily.

The website has changed since the opening of this issue, but I'd say this is still relevant as the new active styles are similarly low contrast for this particular piece of the design.