Why evaluate screens in shades of grey?

First of all, a word of thanks to everybody who has asked questions via comments, twitter or e-mail. I will take the time to answer all questions that could interest the user experience community in a special article.

Dushan (http://www.ressources-marketing-internet.com/), whom I want to thank, wants to have some more details on the relevance of analysing a screen using shades of grey.

When a user visits a website, his visual system plays an essential role: without it, the brain wouldn’t receive any of the information that is displayed on the screen.

The visual information penetrates the eye, where it is captured on the eye’s retina. There are two kinds of captors: the so-called cones and sticks.

The retina has about 125 million sticks and 5 million cones. There are three kinds of cones (red, green and blue) but there is only one kind of stick, and that one can only see shades of grey.

That’s the first reason why a screen analysis in shades of grey is important: less than 1% of receptors is capable of treating colours.

The sticks also capture the luminosity of the different zones of a web page, and as such, capture all contrasts. When we talk about contrasts, what we really talk about is variations of light intensity. The sticks are mainly in the zone of peripheral vision.

99% of the eye captors (sticks) treat the information of a web page in shades of grey. 1% of captors (cones) treat the colours. The latter are located in the Fovea zone.

Only a few are located in the peripheral vision.

On a 1024 screen, the foveal vision – we are simplifying things here -, the eye (foveal vision) only sees clearly about 7% of the width of a page. This is the net zone, which consists almost exclusively of colour captors.

The other 93% of the page is seen with a lot of sticks and very few cones. As a result, colours lose their vivacity and vision becomes more and more blurred, as we move further away of the point at which the eye is looking.

So, in short:

Most of the screen will be blurred and information on the colours is progressively lost in favour of information on the shades of grey. That’s why it is important to analyse screens in shades of grey.

An example on the design of our new site that will be released in a couple of weeks ☺


The button ‘View Case Study’ is an important one. But will it be seen?

Screen - Grayscale

Let’s start with an analysis of the sticks (shades of grey): by fixing each cross on the screen, the button is easily visible by its contrasts in shades of grey.

Peripheral Vision - Grayscale

By simulating the peripheral vision on one of the crosses, the button rests very visible, even when blurred.

Screen - Colors

So, let’s now have a look at the analysis of the cones (colours): by fixing each of the crosses, the colorimetric information strengthens the contrast of the button’s shades of grey.

In peripheral vision, the button is very visible.

Peripheral Vision - Colors


– Sticks: OK
– Cones: OK

If I want to give visual priority to one button rather than another one, I use the same principles to decrease the visual importance of the elements ‘Interested’ and ‘Stay tuned!’ by decreasing the saliency in shades of grey and by putting no colour whatsoever!

Now, it’s your turn!

One Comment

Comments are closed.