How to Use Color Effectively
Adjusting Value with Size
Science-Based Content Design©
Check out our first premium online program!
June 28, 2022
Using an intentional difference in value can create an illusion of color consistency and improve usability.
To ensure the perception of color consistency throughout a deliverable, make the color slightly lighter (higher in value) on larger elements and darker (lower in value) on smaller elements.
Before and After
Drag the slider left and right to view the image before and after.
Adjusting the value based on the size of an element creates a subtle but important difference that results in an optical consistency. It’s this kind of attention to detail that makes content both usable and delightful.
When it comes to developing content, using value variations can enhance usability, as well as visual appeal.
Note that, while such design details may seem trivial, and our users are often not consciously aware of them, they affect our overall ability to percieve and process information. Using such devices can improve usability and also has an important affect on the overall perception of care, sophistication, quality, and credibility.
Value Variations in Content Design
Click on an image to view a larger version.
Single Value (Light)
Single Value (Dark)
Using multiple color values enhances legibility and scanability, and allows you to direct your users’ attention to important elements by creating more contrast.
Human beings have evolved to automatically detect and assign meaning to differences. We are incapable of not processing differences. When differences are irrelevant, it increases the difficulty of perception and information processing because we have to make comparisons, assess relevancy, and then discard or ignore what is irrelevant.
When we create content, we can intentionally use differences to convey meaning that has value to our users. We can also remove differences that have no meaning to reduce cognitive and perceptual load. To use differences effectively, it’s important to focus on how they are percieved (which doesn’t always correspond to measurable reality), which means cultivating an understanding of perception and information processing.
Because of the differential way that we percieve and process information, the way we interpret a specific color depends on the colors around it. (In fact, visual design is always about the relationships between elements, which is one reason that it’s so difficult to both teach and learn.)
We also process sensory information categorically. This means that we put sensory stimuli into categories so we can process large quantities of general information, rather than every sensory detail. When processing visual information, we tend to categorize the background as irrelvant, which means we disregard the background and think of it as lacking in design attributes. However, the background, just like the foreground, has color, and the background color can overwhelm the foreground color, making it appear lighter in value. To compensate for this and create an illusion of consistency, we can make larger elements lighter and smaller elements darker.
This “checkershadow” illusion by Edward H. Adelson demonstrates how we perceive the same color differently because of the surrounding colors. [Reference]
On a physiological level, this occurs because of phenomena such as color opponencey, retinal fatigue, selective adaptation, and natomical structures such as the ganglion cells, which are sensitive to specific features and attributes.
The human response to color is incredibly complex. A key factor is how our sensory systems respond to stimuli in a differential way – that is, when we percieve one type of stimuli, our perceptual system suppresses our perception of opposing stimuli. This phenomenon helps us to filter out irrelevant sensory information so that we can use our limited information-processing resources to focus only on what is important.
Researchers have proposed several theories that explain color perception, including trichromatic processing, color opponency, lateral inhibition, and more.
Color vision is based on our ability to process three primary colors (blue, green, and red) because of three specialized types of cone cells (photoreceptors in the retina) that respond to different wavelengths of light (small, medium, and long).
Our visual system responds to color in pairs in a differential (or antagonistic) way, so that when signals are sent about one color in the pair, signals about the other color in the pair are suppressed (or inhibited).
Neural activity occurs in a differential way, so that when activity in one neuron is stimulated, activity in neighboring neurons is suppressed. This occurs in a spatial pattern that radiates outward from a central neuron, creating a circular “center-surround” effect.
After being stimulated for a period of time, neurons become fatigued, so that when a stimulus is removed, there is a sort of rebound effect in which the differentially stimulated neurons continue to send signals about complementary stimuli that don’t actually exist. This applies to color and other stimuli.
All of our sensory systems adapt to certain stimuli, which is why we quickly adjust to things like nasty smells so that, after some time has passed, we aren’t aware of them any more. Selective adaptation happens when neurons become fatigued.
Color constancy is a perceptual mechanism that ensures that we percieve a color consistently even when the color actually changes due to changes in lighting conditions. Color constancy has been attributed to unconscious inference based on memory, retinal responses in the eye, and neural responses in the brain.
Certain neurons respond to specific types of visual stimuli. These stimuli include certain features (such as corners and edges), certain attributes (such as tilt and curvature), and certain complex objects (such as faces). This physiological sensitivity to specific stimuli is closely related to the phenomena described by the Gestalt principles of perception.
If you’d like to learn more about the science of visual perception and how it relates to design, Sensation and Perception by E. Bruce Goldstein and James Brockmole is a great starting point.
Cite This Page
The InfoDev Academy does not engage in affiliate marketing, so that you can be certain that all suggestions and recommendations are 100% genuine and in no way influenced by financial incentives.