Brain & color contrast

dancing-koala — Fri, 20 Sep 2019 13:00:18 +0000

The following is a short story about us, humans, being slaves of our perception.

As most people, I know my brain can be playful when interpreting what my eyes see but it never happened to me with software development.

I did a first version of a website for a customer of mine, it contained several light gray banners over white background as follows:

Nothing crazy here. For a second version, my customer asked me to add texture to the background, like paper texture. Ok fine, I go to Transparent textures, grab the "paper beige" one and apply it to my body tag.

WTF! The gray banners are now white!

Why is that happening ? Does Chrome try to enhance contrast for legibility ? Did I accidentally change a property ? Did someone cast a voodoo spell on my website ?

After a dozen minutes browsing CSS properties of all the tags potentially incriminated, I used the KDE color picker to check the actual color of the banner.

As you can expect, it was just the same as before, the change was only in my brain. Because of the texture being of a much darker gray than the banner, the contrast changed from light gray over white (dark over light) to light gray over darker gray (light over dark).

You can experience it with this JSFiddle. The effect is much lesser than on a fullscreen page but you can still experience it (I tried embedding it but dev.to's light theme kills the illusion).

Lesson learnt: only check your CSS after checking your own brain ;)

DEV Community: dancing-koala

Brain & color contrast