Is Color Contrast Important on your Web Page?
Years ago - while we were having a drink on a cafe terrace - a friend complained that she was stared at annoyingly and got funny remarks on her way to our appointment. She never had such an experience before.
I had no idea what caused this change of behavior until she said goodbye and walked away. A few feet away from me it looked as if she wasn't wearing a shirt. The fabric could be seen up close, but from a distance the color of her skin and the T-shirt were almost the same.
No wonder she was stared at. This was a typical example of sparse color contrast going wrong.
Color on screens
I was reminded of that story when someone asked me to check out his website. What struck me was the lack of color contrast between the different elements on the pages. In addition, colors were used right next to each other (red and green) that a color-blind person could not distinguish from each other.
It turned out that a comment about that had already come from a color blind. Making me wonder why he hadn’t changed anything.
Since 1 in 20 men is color blind, it seems to me that you should take that into account. (We women are lucky, color blindness is less common with us).
Tip: look through your eyelashes
If you make your own website and you have doubts about the color combination, take a look at your screen through your eyelashes with squinted eyes. You will see where a lot of color contrast exists and where there is little or too little.
Below is a color combination that I could have applied in my own website and what that page would look like when I look with my eyes squinted:
(PS I made the images a while ago in the Netherlands and since it’s the image that counts and not the text I left it that way.)
Even without squinting you can see all the problems in the menu bar. And the name in pink on blue definitely causes difficulty seeing it right.
It can even get worse if you use complementary colors (complementary are colors that are opposite each other in the color circle, for example red-green or orange-blue) although it is in reality the hue of the color not the fact that they are complementary. Purple-yellow is a complementary pair of colors that can be applied without causing trouble, because it is a dark hue next to a light one.
But I love bright colors
"But those bright colors go so well with my product", I hear you say. My answer: "That's no problem, just make sure they are not right next to each other". You can also apply the colors separately.
Even then keep paying attention to the contrast between the surrounding color and the color you want to use. When you look with squinted eyes at the example below you will notice that there is not enough contrast between black and pink.
If the tip to look through your eyelashes is a problem for you, it might help you to imagine what a page looks like in black and white. The example in black and white shows this:
Color contrast in a diagram
This diagram shows that colors that are in the horizontal direction next to each other generally result in (too) little contrast. It is better to combine a color from the top rows with a color from the bottom rows.
Do you think it is important to consider the colors you choose?
Related
My other article on color:
https://my.wealthyaffiliate.com/hmommers/blog/color-is-personal-the-symbolic-meaning-of-color
Recent Comments
46
Very interesting. I don't go in for colour much. I just use it for headings. Plus I am colour blind and can't match clothes at all, so stick to black and blue/navy with anything I buy. As for matching ties, wouldn't have a clue. Thankfully no one wears them anymore as I have purples and things that I bought thinking they were navy. And as for green and brown, I wouldn't dream of going there!!!
So I love black and white!!!!
Very interesting. I don't go in for colour much. I just use it for headings. Plus I am colour blind and can't match clothes at all, so stick to black and blue/navy with anything I buy. As for matching ties, wouldn't have a clue. Thankfully no one wears them anymore as I have purples and things that I bought thinking they were navy. And as for green and brown, I wouldn't dream of going there!!!
So I love black and white!!!!
You're an experience expert on color and color contrast then, Geoffrey. I can imagine your choice for black and blue.
One of my printers in 'the old days' was color blind as well. He used the color meter all the time to be sure the prints were all right. :)
See more comments
Good evening Hannie,
I am a very visual person and that is why the first time I visit a website I must like the visual aspect to then really want to stay longer and start reading.
I remember visiting a website years ago and I experienced the colors as very aggressive and did not feel comfortable at all.
I think the colors should fit your niche.
A nice and helpful post.
Greetings from the south of Spain,
Taetske
Good Morning Luz,
Thank you for your good wishes. I hope you and your family will be able to be together albeit a small group. We do not have family here. We are staying put with our little tree that will be decorated today. We use a life tree as I always have real candles, so it stays inside only a few days to then be planted in the garden.
Abrazo del Sur, Taetske
Hi Taetske, if it was a kickboxing site or similar to that, then the choice for aggressive colors was right. You are very right that the colors should fit our niche. :)
Have a great time, we are lucky to be in the sun, aren't we. :)
Hannie