Accessibility: Mixed color scheme on the homepage
straight-shoota opened this issue · comments
The website suppors both light and dark color schemes, following the user's preference.
The choice between dark mode and light mode is not simply one of taste, but also has functional considerations. Some people have trouble reading light text on dark backgrounds, for example.
However, the header part of the home page is always a dark scheme.
We received a comment about this on the forum from a user asking to have the light mode actually be light all the time: https://forum.crystal-lang.org/t/website-relaunch/6719/18
What we're currently doing is basically ignore the user setting for the color scheme and always use a dark scheme for the homepage header.
On smaller viewports the header can cover the entire screen, which even more accentuates the problem because then there's literally no difference between light mode and dark mode.
In these secreenshots for example, only a small part on the bottom shows the main content area which follows the intended color scheme. With a little less vertical viewport size, this would be gone.
Light:
Dark:
While I do think this stark contrast has asthetic value, we should not set that above the basic needs for being able to read the content.
A solution to this would be to have the header follow the color scheme of the rest of the page.
This example just uses filter: invert(); which doesn't get everything right but is good enough to show how it would look. An actual implementation would be more sophisticated, of course.
I don't think this would be too bad.
There is probably no browser configuration that we could use to determine whether the user prefers uniform color scheme.
So if we want to change this we can only do it for everyone or as a custom user setting.
This issue has been mentioned on Crystal Forum. There might be relevant details there:
As a "prefers light mode" user, I actually much prefer this light header! Of course, the lines of the background image have a bad vibe with a mere invert, but I really like the feeling better.
I agree with @ysbaddaden the background pattern should have less contrast but the rest looks good to me. I assume the rotating logo wouldn't change, doesn't it?
I'll vote for too. While "the color of Crystal" is black, I think it's good to be a bit conservative with it. Keep it for the logo, but I think the pattern looks good inverted.