Sunday, January 7, 2024

(Question) Button fill and text Colors - Achieving proper contrast ratio

To preface this, I'm not a ui/ux designer, however we are looking to fix/change our button colors and looking for feedback/help. Any opinions are greatly appreciated!

So currently our logo features a pretty light green color and we planned to use that color as the fill for our main buttons with white text over it, however the contrast ratio comes out to be 1.8 which is bad for visibility.

We keep trying different greens that are darker and over 3.0 contrast ratio but none of them really match the vibe of the site and turn out looking to pukey/dark.

We were thinking of just changing the button text color to #212530 which would allow us to use much brighter colors for the buttons and still maintain a high (4.5+) contrast ratio but not sure if that looks good. I attached some screenshots below.

We would love to hear your thoughts/opinions on what we should do with the button fill/text colors, thank you!

So this is the current one where the green has a 3.36 contrast ratio. I don't really like this green button color as it seems too dark/boring for me.

https://preview.redd.it/d8g7b4sn03bc1.png?width=1735&format=png&auto=webp&s=d38aa786c717f9f34e8912769827c59b59e3cf21

And then here is a mockup i made if we were to change the text color and made the buttons brighter colors that pop more. (we would have our artist modify the sports image background to match the green color of the button as it matches the logo in top left). All of these buttons also have hover and click effects which make the button colors lighter.

https://preview.redd.it/h0befd1o03bc1.png?width=1735&format=png&auto=webp&s=d03912f0972c25caeb7b7e01fd27776355e5d64c


No comments:

Post a Comment