Increase contrast in left sidebar
vickychijwani opened this issue · comments
Hi, I've started using Semantic UI recently. Overall I really like the framework and am excited to work with it!
I have a suggestion for the docs website: please increase the text contrast in the left sidebar, it's really low. 12px font, light grey text on dark grey background. (note: "contrast" is a combination of many things: size, color, weight). Personally, I find it quite hard to scan the list of components. I also don't prefer zooming in because then the sidebars take up too much horizontal space and the body text becomes slightly too large.
So this is just your opinion?
There's tons of research and guidelines for text contrast on the web, see the W3C guidelines and the cheeky-but-effective Contrast Rebellion manifesto. I think that increasing the contrast should make the docs significantly more readable for people with low-quality displays/color deficiency (like me)/vision loss/large font preference.
I actually calculated the sidebar's contrast ratio (as per the W3C guidelines) and it works out to 5.2:1. The minimum color contrast recommended is 4.5:1, so at first glance it seems we're ok. But here's the catch: the guideline applies to font sizes >= 24px/18pt (at regular weight). Semantic's sidebar has a font size of 12px. So we either barely clear the bar, or not at all. And this is the minimum we're talking about.
I can send a PR with several variations to improve the contrast, but first I need some feedback and consensus on this. Thanks for reading!
Agreed. While I haven't had any problems with the sidebar's contrast back at home on my macbook, now that you pointed it out it is indeed harder to read on the monitors we use at work.
I don't think many people would be against increasing the contrast as long as it doesn't make the sidebar look less fabulous.