Can You Believe Your Eyes?

Colour in Optical Illusions

Colin Shanley
Nov 10, 2020 · 7 min read
Hero image for Colour in Optical Illusions by Colin Shanley
Hero image for Colour in Optical Illusions by Colin Shanley

ere 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.

Two adjacent grey squares. The one to the left looks darker, but they re the same colour.
Two adjacent grey squares. The one to the left looks darker, but they re the same colour.

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.

A checkerboard of dark and light squares. Square A is darker than Square B.
A checkerboard of dark and light squares. 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!

Square A appears darker than Square B, but they are exactly the same.
Square A appears darker than Square B, but they are exactly the same.

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.

Squares of the same colour look to be different because of the colours surrounding them.
Squares of the same colour look to be different because of the colours surrounding them.

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.

Six discs appearing as alternating purple and yellow.
Six discs appearing as alternating purple and yellow.

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.

Six pink discs. Alternating blue and green vertical stripes make them appear either purple or yellow.
Six pink discs. Alternating blue and green vertical stripes make them appear either purple or 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.

Animation of inverse colours of the US flag. Red is shown as cyan, white is shown as black, and blue is shown as yellow.
Animation of inverse colours of the US flag. Red is shown as cyan, white is shown as black, and blue is shown as yellow.
Gaze at the image for a full 20 seconds before it changes to 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.

Animation of buildings showing how perceived colours can persist in black and white.
Animation of buildings showing how perceived colours can persist in black and white.
Stare at the black dot for 20 seconds. When the image changes keep your eyes on the dot.

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.

Image for post
Image for post
Stare at the black dot for 20 seconds. When the image changes keep your eyes on the dot.

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.

Image showing how rods lack detail in peripheral vision.
Image showing how rods lack detail in peripheral vision.

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.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Colin Shanley

Written by

Colin has been solving problems and designing applications for more than 30 years. His designs touch our lives every day.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Colin Shanley

Written by

Colin has been solving problems and designing applications for more than 30 years. His designs touch our lives every day.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store