nixos-homepage icon indicating copy to clipboard operation
nixos-homepage copied to clipboard

Accessibility: Contrast of the green color #6ad541

Open etu opened this issue 3 years ago • 3 comments

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

etu avatar Sep 24 '20 15:09 etu