How can I create a set of colors with the same readability/contrast?

Design Thinking
#1

Goodmorning,
I’m a newbie to the community and with English, but I try to explain here my question.

Now I’m working to create a web app with several buttons -and several different colors.

74×736 7.29 KB

Their initial location is in a vertical menu (background-color: #282828) and they can move on a white side canvas.

The problem is that they don’t have the same readability.
While I’m googled to find the problem, I’ve read about contrast ratio, and lightness (HSL) - but also the colors with the same lightness don’t have the same contrast ratio (i.e. the same readability).

So, how can I create a set/palette of color that have the same readability, contrast and feel?

I wish I explained myself.
Thank to who replies.

#2

You can convert your image to greyscale, then you will see how well your different values read. Some greyscale converters takes the hue readability into account and tries to make the greyscale images look the same as the colour version. Gimp for example, has a “desaturate” option in the colours menu. Don’t use that. :slight_smile:

A better option is to create a black layer on top of your image and set its layer mode to “color”. That works in just about any image editor with layers.

This is from Gimp, I don’t have Photoshop on this computer:

553×628 21 KB

Turn the black layer on and off and adjust your colours until they are equally readable.

#3

Ok, I try this immediately. If I have any question, I’ll write here again.
Thank you very much :grinning:

#4

I’m sorry, but how may I do this?

#5

As I was fooling around in Gimp I found this that might be interesting to you:

Insensitivity to green

686×580 37.4 KB

Insensitivity to red

694×609 37.6 KB

Insensitivity to blue

698×609 37.5 KB

View → Display Filters

2 Likes
#6

Which program are you using? In Gimp you click this drop down menu:

448×512 46.7 KB

In Photoshop there is a similar menu, but it might be at the bottom of the layer list.

#7
1 Like
#8

Thank you very much Bleke…!
Unfortunately, on this computer, I don’t have Photoshop so I downloaded Gimp when I viewed your answer - and I can’t found the command.

You’re very kind, It’s really interesting!
I found a similiar tool for webpage --> https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl

Checking for colour blind accessibility
#9

Good that you found a solution that works for you! :slight_smile:

2 Likes