search

NixOS / nixos-homepage

Sources for nixos.org
https://nixos.org
312 stars 320 forks source link

Accessibility: Contrast of the green color #6ad541 #574

Open etu opened 4 years ago

etu commented 4 years ago

I find the contrast of #6ad541 when it's text especially on white background a bit hard to read. It's especially noticeable on this page: https://nixos.org/governance.html

image

The contrast for this green text on white is 1.87. For large text to be accessible and easy to read the recommended contrast should be 3 or even 4.5 for big text (which is the case here). (Link to reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast )

Just changing this color to the darker end of the gradient, for example #3c861f gave me a contrast of 4.54 and the following result that I find way easier to read.

image

I also find the green color to make the page look a bit busy, we have a very nice white theme with shades of blue going on. Then we have stabs of green pointing out here and there. In general I really like the update, except the green.

Some actual suggestions for replacing the green color

I did some experimentation in my devtools locally and tried to have #4a53d2 as color for certain elements on the mentioned page above, and most places on the startpage (not the places with dark background).

image

Same color applied a bit down on startpage: image

Then I selected #aae4fb for the text and #7d85f7 for the left button: image

garbas commented 4 years ago

This is planned to be changes - even for the landing page - but we didn't have a ticket for it. Now we have it thanks to @etu

A quick fix would be to change from h3 to h2 in governance page, but real fix would be to change this green color in our theme.less to something else, most likely to one shade of "nix-blue".

davidak commented 4 years ago

I agree with the contrast issue, but the suggested colors don't really match the design.

etu commented 4 years ago

@davidak I'm not a designer, I just played around with the colorpicker :slightly_smiling_face: And with that said, as a non-designer I still think the green doesn't match the selected plaette. But that seems like it will be addressed according to @garbas comment above, hopefully by someone with a better eye for the design than me :slightly_smiling_face: