What happens when we walk into a movie theater ?
We can’t see anything at first and start to see things only after a while. Our eyes take about 30 minutes to adapt to the drop in light intensity. They take time because they’re shifting from photopic or bright-light vision to scotopic or low-light vision. And because our peripheral vision is differentially sensitive to color, as light intensity lowers, we lose the ability to see different colors at different points.
For example, when the light goes down in a garden at twilight, are flower no longer looks bright red. It turns dark gray. But the green leaves retain color longer and start to appear relatively bright . This differential sensitivity to color is because ,as light reduces, cells in our eyes more sensitive to blue-green wavelengths remain active longer.
This causes our eye’s sensitivity to shift toward the blue end of the color spectrum in lowlight, which is called the Purkinje shift. Next, we’ll see how this shift can inform UX design.
The Purkinje shift indicates that, as light reduces, red is the first color we lose . And since red appears the darkest in low light , it is the worst color to use for objects that need to be seen when light goes down. We’ll get into trouble if our design shows pure red information on a black background because the information will become hard to discern in low light.
Newer fire trucks are colored lime green or yellow with the Purkinje shift in mind . These colors are the best because they appear the brightest in low light.
Let’s study another aspect of color vision.
When white light shines at us, the lens and cornea of our eye act like a prism and break the light into its color components. Now, each color has its own wavelength, so different colors focus on slightly different points within the eye, a phenomenon called chromatic aberration. Red focuses behind the retina and blue, in front of it. This causes pure red and pure blue to appear fuzzy and makes text of this color hard to read.
Even worse, if we put red text on a blue background or vice versa, our eye’s focus keeps shifting between red and blue because of chromatic aberration . So, sometimes the red appears in the foreground and sometimes the blue, with a slight fringe showing along the boundaries that separate the colors. This appearance creates a floating, three-dimensional effect, called chromo stereopsis, which is jarring and not something sound UX design would produce.
Stereopsis, in simple words, refers to the perception of depth (or 3Deffect) resulting from the visual information derived from the two eyes of an individual. The idea is the same as stereo speakers, where sound comes from different sources. So, in chromo stereo sis, light can be understood as having this stereo effect of colors instead of sounds.
In general, to avoid chromostereopsis, we should avoid bringing two colors that are very far apart in the visual spectrum together.
Contrast can be evaluated for compliance with standards like the Web Content Accessibility Guidelines (WCAG). WCAG 2.0 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.]
Sufficient contrast in a display depends on both brightness and color differences.
When we begin designing a display in monochrome, we should have a contrast difference of about 90% between the foreground characters and the background for things to be read comfortably. We should maintain this contrast even when we add color in.
Remember: If the contrast difference is much greater than 90%, the glare becomes too high. If the difference is much lower , the background or other elements in the display become darker or more saturated, so our eye will focus on those instead of the foreground.