Contrast, Color, and Size and Their Effects on Visual Perception and Signal Strength

Introduction

Visual perception is how we make sense of the world around us through the light that enters our eyes. Throughout evolution, the act of processing signals and distinguishing them from their surrounding noise has allowed humans to take the necessary actions in response to environmental changes. These signals processed by the retina and visual cortex are vital aspects of cognition, because knowing how to differentiate between targeted signals and background noise is what allows humans to survive. This review examines theories and concepts centered around visual perception and analyzes the aspects that are most important to signal processing: contrast, color, and size. When applied narrowly to user experience, these concepts have significant implications, as this understanding can distinguish a usable, effective interface from one that is not. Through examining a real-world design example, Boston’s iconic Citgo sign, we can begin to recognize how having a critical understanding of visual perception, the biology of the human eye, and bottom-up design have large implications on user experience.

Discussion

Visual Perception and Bottom-Up Processing

Visual perception is how humans process signals through visible light and its interaction with environmental stimuli. The act of taking in signals from our environment allows humans to take the necessary precautions and actions in response to environmental changes. Although the nervous system is very adept at recognizing and interpreting signals, they are not always clear. Signals are most often ambiguous, so determining the strength of the signal will allow for better discrimination between a signal and it noise. The stronger the signal, the easier it is to process against its background noise.

Bottom-Up Processing. The human eye, due to its many connections to the optic nerve, is very sensitive to signals. Light enters the eye through the cornea, and then the lens focuses the light onto the photoreceptors (i.e. cones and rods) within the retina. Cones are “densely packed in the fovea” to help produce high resolution and color vision, and rods are located in the periphery of the retina in order to help process light and motion in varying environmental conditions. Through a series of quick eye movements, the human can process many signals at once. In one single glance, the eye detects contrast, color, contour, motion and size, all of which will be discussed in the following sections.

Contrast, Contour, and Color

Contrast is one of the most important factors in determining the strength of a signal. Contrast is the degree at which a stimulus is different from the other stimuli that surround it. It detects the change between the foreground and the background. Just like how our brains process signals, the higher the contrast, the more that stimulus is be perceived by the brain. In relation to design, it is critical to strike a balance between maximum contrast (strongest) and threshold contrast (weakest) in order to produce the optimal signal. Over-designing or designing on the edge of just noticeable differences (JND) is a fine balance and should be weighed heavily, as visual perception varies greatly based on the viewer and viewing conditions.

Luminance and Contour. Luminance is regarded as most influential on contrast. Luminance is defined as the reflection or emission of visible light on a surface, and is also described as the measurement of perceived brightness (although luminance and brightness are not the same in practice). Because of the greater number of light-processing rods within the retina, humans are consequently more sensitive to luminance. This sensitivity to luminance allows humans to easily detect change and adapt to a variety of light conditions.

Throughout evolution, humans have evolved to identify change within the environment through contour enhancements (edges) or variances in luminance levels. Edges are created when an object's luminance changes rapidly, creating high contrast between the stimulus and its background. Once an edge is detected, the nerves within the eye exaggerate and amplify it, allowing the visual cortex to process the object in our field of view. This detection of edges allows humans to recognize objects in our environment and assign value and meaning to them based on appearance.

Hue and Saturation. Hues are how humans distinguish one spectral color from the other on the visible light spectrum. Saturation, or purity of a hue, is the intensity of a hue at its dominant wavelength. When a hue is in its purest form, it is the most saturated, and consequently has a large influence on contrast and the intensity of the signal. Conversely, an unsaturated hue would have “contributions from many other wavelengths” and a much lower contrast. It is common practice to avoid using heavily saturated hues in designs, or at least use it sparingly, as pure hues can fatigue the eye due to strong contrast. Generally, humans find pleasure and appeal in higher saturated hues, but it is important to keep in mind the downsides to utilizing a hue with maximum saturation.

Motion and Size

Motion. Detecting motion is one of the most important functions in visual perception, as it has a significant impact on contrast, depth, and luminance sensitivity. The human eye is very sensitive to motion, as it is processed and calculated by the nerve endings located in the periphery of the retina. Motion “reflects a change in one’s visual environment” and has a direct impact in understanding how real-world stimuli form and aid with behavioral responses and actions. As motion relates to design, the overuse of it can cause over-stimulation, as humans cannot block it out. Designers should use change and motion deliberately and strategically in order to deliver meaning.

Size. The size of a stimulus, along with luminance and contour, is equally important to signal processing. The size a stimulus has a direct relationship with the signal. As the size of a stimulus increases, so too does the strength of the signal. Size can be affected heavily by other influencers and complicating factors, such as viewing distance, viewing angle, and environmental conditions. When comparing viewing distance and size, there is an inverse relationship; as distance lengthens, the perceived size appears smaller. In contrast, viewing angle and size have a direct relationship: as the viewing angle grows, so too does the size of the stimulus.

Design Case

While each concept relating to signal processing was described separately in the above sections, in reality, they all influencer one each other. Through examining a real-world design case, viewing Boston’s Citgo sign while driving at night, an analysis will be conducted to determine if its design either adheres to or runs counter to bottom-up visual perception.

Luminance and Edges. The sharp horizontal and vertical edges that form the boundaries of the sign are one of the first signals the driver will process. These sharp changes in luminance along the edges add stark contrast against its dark backdrop, only making the sign more visible and the signal more intense. Similarly, the red triangle also has strong contrast against its white background due to its shape and sharp edges. Since humans are neurologically tuned to detect contoured edges, the nerves within the eye will amplify the edges both along the sides of the sign, as well as around the triangle, and strengthen the perceived contrast.

At night, the luminance emitted from the LED lights within the sign is incredibly intense, sending an equally strong signal to the visual cortex. With the Citgo sign situated in the driver’s field of view as they head west on Storrow Drive, the strong levels of perceived brightness can be hazardous to the driver’s safety. Especially during poor weather conditions, the glare from the bright lights can increase the likelihood for accidents, as the perceived brightness can temporarily blind the driver or cause ‘afterimage’, which results in momentary blurry, spotted vision. Because humans are generally most sensitive to luminance changes, it is no surprise that looking at the Citgo sign while driving could interfere with the drivers’ safety.

Saturation and Hue. The LEDs within the Citgo sign not only contain strong luminance contrast but also possess high saturation. The red and blue hues utilized within the Citgo logo have the highest intensity, as they are both at their dominant wavelengths within the visible light spectrum. It is common practice to use saturation sparingly in interface design, as pure hues can fatigue the eye due to strong contrast. Red generally has good visibility due to the high number of red-sensitive cones within the fovea, but it has poor visibility under low light conditions. The retina is less sensitive to blue than red, but despite only having fewer blue-sensitive cones, the human eye tends to shift towards the blue end of the color spectrum at low illumination levels, making it appear as though it has a higher luminance value. Although both red and blue hues fall at either end of the visible light spectrum, putting them in close proximity to one another, especially at full saturation, is a poor design decision. Red hues typically push towards the foreground of a stimulus, and blue fades into the background. Because of this close proximity, in addition to the strong luminance from the white background, the red and blue lights create a quivering effect, resembling motion in the periphery of the eye. While the Citgo sign already utilizes motion through varying flashing, high contrast patterns, the excess motion created by the saturated hues will only cause more distraction.

Size. Boston’s Citgo sign can be seen from many parts of the city, as the large sixty-foot sign is situated high above the buildings surrounding it. Due to the size and positioning of the sign, drivers heading west on Storrow Drive have a particularly good view of it. For a motorist at night, the sign stands out even more among its surrounding buildings, displaying strong contrast against the night sky and the buildings in its proximity. No matter the viewing angle or distance, the contrast of the sign is so strong that even from far away the sign still sends a powerful signal to the driver. Especially while driving, this high contrast can pose to be incredibly dangerous, as the onset of these strong signals can fatigue the sensory system rapidly due to rapid eye movement. LEDs with their stronger amounts of luminance and saturation typically have much more abrupt onset times, as compared to other sources of light.

Design Recommendations

The Citgo sign’s use of strong contrast, while achieving the goal of visibility, can present hazardous driving conditions for drivers, especially at night. The creation of such strong signals via the combination of intense luminance, large size, moving patterns, and highly saturated hues will eventually tire out the sensory system. For interface designers, the overarching goal in interaction design as it relates to visual perception is finding the optimum contrast. One suggestion is to utilize the split complement theory in order to reduce the saturation of the red and blue hues in Citgo’s logo. Alternatively, mixing some darker hues with the existing red and blue can also help reduce intensity. In addition, reducing the luminance, especially at night, will reduce the strength of the signal sent to passersby. This reduction can reduce the perceived brightness, and minimize the glare caused by the bright lights. Both of the suggested changes to contrast will allow for a more controlled, predictable result.

Conclusion

Visual perception is how humans understand and process our environment through the light that enters our eyes. Through the understanding of signals and noise, the biology of the eye, and how visual contrast relates to the psychology and behavior of signal processing, designers will be able to apply these principles in order to exercise greater control over the user’s response to design. Designers strive to produce predictable outcomes, and the way to do that is through applying the psychological and perceptual concepts that relate to signal strength and contrast. While each of these factors play their respective role in determining signal and contrast strength, it is knowing how the combination of these concepts affect visual perception and design. Through the examination of Boston’s iconic Citgo sign, we can see how this combination of influencers can have a very strong, negative effect on the human eye. Understanding how each factor is at play will only make a designer more effective. Through understanding how each factor is at play, designers should strive to lower the burden we place on users by making designs even more effective and visually attractive.

References

1. Abdi, H. (1966). Signal_detection_theory[1].pdf (pp. 1–9). pp. 1–9.
2. Albers, J. (1975). Interaction of Colour (Revised ed). Retrieved from http://www.amazon.co.uk/dp/0300018460
3. Anderson, B. L. (2003). The Role of Occlusion in the Perception of Depth, Lightness, and Opacity. Psychological Review, Vol. 110, pp. 785–801. https://doi.org/10.1037/0033-295X.110.4.785
4. Aydin, T., Čadík, M., Myszkowski, K., & Seidel, H. P. (2010). Visually Significant Edges. ACM Transactions on Applied Perception, 7(4), 1–15. https://doi.org/10.1145/1823738.1823745
5. Brenner, E., & Van Damme, W. J. M. (1999). Perceived distance, shape and size. Vision Research, 39(5), 975–986. https://doi.org/10.1016/S0042-6989(98)00162-X
6. Bullough, J. D. (2005). Onset times and detection of colored signal lights. Transportation Research Record, (1918), 123–127. https://doi.org/10.3141/1918-16
7. Busch, N. A., Debener, S., Kranczioch, C., Engel, A. K., & Herrmann, C. S. (2004). Size matters: Effects of stimulus size, duration and eccentricity on the visual gamma-band response. Clinical Neurophysiology, 115(8), 1810–1820. https://doi.org/10.1016/j.clinph.2004.03.015
8. Falk, D. S., Brill, D. R., Stork, D. G., & Ruiz, M. J. (1988). Seeing the Light: Optics in Nature, Photography, Color Vision and Holography. The Physics Teacher, 26(4), 252–252. https://doi.org/10.1119/1.2342512
9. Gibson, E. J., & Walk, R. D. (1960). The “visual cliff”. Scientific American, 202, 64–71. https://doi.org/10.1038/scientificamerican0460-64
10. Grossberg, S. (2012). Visual Motion Perception. In Encyclopedia of Human Behavior: Second Edition (Vol. 92, pp. 637–651). https://doi.org/10.1016/B978-0-12-375000-6.00370-0
11. Helson, H., & Lansford, T. (1970). The Role of Spectral Energy of Source and Background Color in the Pleasantness of Object Colors. Applied Optics, 9(7), 1513. https://doi.org/10.1364/ao.9.001513
12. Grossberg, S. (2012). Visual Motion Perception. In Encyclopedia of Human Behavior: Second Edition (Vol. 92, pp. 637–651). https://doi.org/10.1016/B978-0-12-375000-6.00370-0
13. Jacobs, D. E., Gallo, O., Cooper, E. A., Pulli, K., & Levoy, M. (2015). Simulating the visual experience of very bright and very dark scenes. ACM Transactions on Graphics, 34(3). https://doi.org/10.1145/2714573
14. Kim, M. H., Ritschel, T., & Kautz, J. (2011). Edge-aware color appearance. ACM Transactions on Graphics, 30(2). https://doi.org/10.1145/1944846.1944853
15. Majumder, A., & Irani, S. (2006). Contrast enhancement of images using human contrast sensitivity. Proceedings - APGV 2006: Symposium on Applied Perception in Graphics and Visualization, 1(212), 69–76. https://doi.org/10.1145/1140491.1140506
16. Meyer, B., Grogorick, S., Vollrath, M., & Magnor, M. (2016). Simulating visual contrast reduction during nighttime glare situations on conventional displays. ACM Transactions on Applied Perception, 14(1), 1–20. https://doi.org/10.1145/2934684
17. Owsley, C. (2003). Contrast sensitivity. Ophthalmology Clinics of North America, Vol. 16, pp. 171–177. https://doi.org/10.1016/S0896-1549(03)00003-8
18. Pal, R., Mukherjee, J., & Mitra, P. (2012). How do warm colors affect visual attention? ACM International Conference Proceeding Series. https://doi.org/10.1145/2425333.2425357
19. Grossberg, S. (2012). Visual Motion Perception. In Encyclopedia of Human Behavior: Second Edition (Vol. 92, pp. 637–651). https://doi.org/10.1016/B978-0-12-375000-6.00370-0
20. Hubel, S. D., & Livingstone, M. S. (1988). Segregation of form, color, movement, and depth: anatomy, physiology, and perception. Science, 240(4853), 740–749.
21. You, J., Ebrahimi, T., & Perkis, A. (2011). Modeling motion visual perception for video quality assessment. MM’11 - Proceedings of the 2011 ACM Multimedia Conference and Co-Located Workshops, 1293–1296. https://doi.org/10.1145/2072298.2071997