Can You Believe Your Eyes?
Colour in Optical Illusions
Were you aware that you see in black and white in low light. Most do not realise this. But next time you get up in the middle of the night in a darkened bedroom, have a look around. You will see only black and white – no colours. Now scan your eyes over the hero image for this article, above. Let your eyes wander over it. The discs appear to be moving, but they are not – it is a static image.
Everyone loves optical illusions. To be clear, an illusion is an erroneous mental representation of something. Colour is no exception, of course, so here’s some optical illusions for you that perfectly illustrate our vagaries in perceiving colour.
The insight gained through optical illusions is incredibly important in design, allowing for improved palettes and application, which I cover in my latest book Colour in User Interface Design, available on Amazon or for direct purchase of the ePUB. The book delves into cones and rods (the cells in the eye that detect colour and brightness, respectively) how they function, and how you can use that information effectively in design. But, for the purposes of this article, consider the following illusions as pure entertainment.
Take a look at the image below. The grey square on the left is clearly darker, right? Wrong. Both squares are the same shade of grey. To prove it, hold your finger up to cover the join in the middle.
In fact, the left-hand square has a darker shadow on its right edge. And the right-hand square has a lighter shadow on its left edge. These shadows convince us that the image is 3D. But it isn’t, of course. Our brains are perceiving 3D, so fool us into thinking the squares are shaded appropriately. This is known as the Cornsweet Illusion. Another famous example of this is the Adelson Checker Shadow illusion. If you look at the image below, it is easy to see that square A is darker than square B.
Now let’s cast a shadow over square B, as shown in the image below. Square A still looks darker than square B, but in fact they are the same shade of grey. Don’t take my word for it – measure the colour of both squares with a colour picker!
Why does this illusion happen? The brain uses relative colour and shading to determine what you think to be the colour of objects in an image (and in the real world). Your brain perceives that the cylinder casts a shadow and makes the spurious assumption about the effect of the light source. It is bogus, but there is no correction for it; the squares will always appear to be different shades.
So much for the rods. Cones are also easily misled. Below are two examples of how colours appear when shown in proximity to other colours. In both examples, the small square is actually the same colour, left and right. But we perceive that colour very differently depending on the colour that surrounds it. These experiments (and many similar ones) were devised by Josef Albers (more on him in my book). There is no trick going on, here. It just a breathtakingly brilliant piece of analysis and experimentation to prove that colour is not always what we think it is.
We can take this proximity of colours to the next level by introducing foreground and background stripes. Take a look at the image of six discs, below. You’re probably seeing an alternating pattern of purple and yellow discs.
But what if I told you that those discs are exactly the same colour? In fact, all six discs are dark pink (#E51C76). This is proven by taking away half of the stripes, as shown in the second image, below. So why does this illusion happen? Well, if you look very closely you’ll see that there are two sets of vertical stripes, green and blue. When the blue stripes are in front of a disc, and the green behind, the disc appears purple. But when the green stripes are in front of a disc, and the blue behind, it appears yellow.
Cone receptors in the eye are also very sensitive to shape and form, as well as hue. Some colours and shapes can be so vivid that the cones continue to fire even after we close our eyes or look away. Additionally, cones can get tired if you stare at brightly coloured image for too long – the cones receive the same unchanging stimulus and basically stop responding. Let’s put that to the test. Stare at the animated image of the flag below. Let your eyes drop out of focus, but keep them trained on the centre of the image, without moving your eyes around – almost hypnotically. After 20 seconds the image will change to plain white.
If you completed the exercise, you will have seen a red, white and blue flag on the white paper. It will not have been that sharp, but it was there. And the longer you stare at an image in this way, the longer the afterimage on the paper will persist.
So what’s going on?
Take the case of the cyan stripes, whilst remembering that cones detect red, green and blue. The green and blue cones got tired and stopped responding after a while, leaving only the red ones ready to fire (ready, but not yet activated, because there is no red in the image). Then the image changed to white. White contains all the spectral colours, so although your eyes were receiving red, green and blue from the white card, the green and blue cones were still not responding because they were tired. Only the red cones responded, so the ghosted stripes on the white card looked red. The same thing happened with your rods. But since they are only sensitive to black and white, the black stars and stripes inverted to white.
This also works will complex images, of course. Repeat the same exercise with the animated photo below. Focus on the black dot in the centre. Again, let your eyes fall out of focus, but don’t take them off the dot. After 20 seconds the image changes – keep your eyes trained on the dot. You will see coloured buildings and trees. But after a while, you’ll begin to realise that the second photo is actually black and white.
Here’s another one for you. Repeat the same exercise with the photo below and, once the photo changes, you’ll see a blue sky, green grass and coloured buildings. These effects are all present in UI design as well.
Finally, an example of how the rods in your eyes lack detail. Look at the image below. Find a black dot and let yours eyes rest on it. All the other black dots disappear (since they are in your peripheral vision). Now move your eyes to another black dot, and the others will once again disappear.
These examples are not trick images – rather they are our brains playing tricks on us. It is the human brain trying to make sense of the world for us. Let’s not forget that the lens in the eye inverts images – it is the brain that converts what we see from being upside down to the right way up.
But sometimes our brains get it wrong. Knowing that – and how to to design for it – is very powerful.
Colin Shanley has been a designer and author for more than 30 years. This article is abstracted from his book Colour in User Interface Design, available on Amazon or for direct purchase of the ePUB.
