Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility: Mixed color scheme on the homepage #796

Open
straight-shoota opened this issue Jun 3, 2024 · 4 comments
Open

Accessibility: Mixed color scheme on the homepage #796

straight-shoota opened this issue Jun 3, 2024 · 4 comments

Comments

@straight-shoota
Copy link
Member

straight-shoota commented Jun 3, 2024

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:
grafik

Dark:
grafik

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.

9f5b078f5c4151aa487f80a7980a97220de7b0c9

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.

@crysbot
Copy link

crysbot commented Jun 3, 2024

This issue has been mentioned on Crystal Forum. There might be relevant details there:

https://forum.crystal-lang.org/t/website-relaunch/6719/21

@ysbaddaden
Copy link
Contributor

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.

@jkicillof
Copy link
Collaborator

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?

@xendk
Copy link

xendk commented Jun 5, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants