Recommended Reading List
April 4, 2022
Using Color Effectively
Color Value and Size
Optical Consistency for Color
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.
|
Design Basics
Science-Based Content Design©
Check out our first premium online program!
Color
Consistency
Using an intentional difference in value can create an illusion of color consistency and improve usability.
The human visual system is hard-wired to detect, focus on, and assign meaning to differences. Thatās why managing consistency throughout a content deliverable is essential to usability ā you donāt want your users to expend limited perceptual and cognitive resources on irrelevant differences. Because our physiology adapts to color differences, maintaining color consistency on elements that are different sizes actually involves using slight color differences.
Guideline
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.
Technical Definition: Value
Value ā The lightness or darkness of a color as determined by the amount of white or black that the color contains.
There are two specific types of value:
- Tint ā A color variation that is lighter than the original because it contains white
- Shade ā A color variation that is darker than the original because it contains black
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.
Technical Definition: Optical Consistency
Optical Consistency ā An intentional difference used to create a perception of consistency based on the physiology of visual perception
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)
Multiple Values
Using multiple color values enhances legibility and scanability, and allows you toĀ direct your users’ attention to important elements by creating more contrast.
Rationale
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.
Checkershadow Illusion
This “checkershadow” illusion by Edward H. Adelson demonstrates how we perceive the same color differently because of the surrounding colors. [Reference]
The Science
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.
Trichromatic Processing
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).
Color Oppenency
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).
Retinal Fatigue
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.
Lateral Inhibition
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.
Selective Adaptation
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
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.
Specialized Neurons
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.
Learn More
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.Ā
You can also check out our Recommended Reading List for other great books, such as Designing with the Mind in Mind by Jeff Johnson and The Non-Designer’s Design Book by Robin Williams.
Cite This Page
Author
Tina M. Kister
Date Published
July 2, 2022
Title
Using Color Effectively
ā
Color Value and Size
:
Optical Consistency for Color
Website
,
InfoDev Academy
Date Accessed
December 18, 2024 6:54 pm
URL
Contents
Tina M. Kister
Tina M. Kister is the creator of the InfoDev Academy and founder of itās parent company, Nanatoo Communications. Kister specializes in taking an interdisciplinary approach to improving information-development processes and has been acknowledged as a āthought leaderā and āchange agent.āWith a background in both creative and technical communications, as well as certifications in technical communication (CPTC), project management (PMP), proposal management (APMP), and content strategy, Kister provides a rare perspective that synthesizes best practices across traditionally siloed areas of business communications.
Tina M. Kister
Tina M. Kister is the creator of the InfoDev Academy and founder of itās parent company, Nanatoo Communications. Kister specializes in taking an interdisciplinary approach to improving information-development processes and has been acknowledged as a āthought leaderā and āchange agent.āWith a background in both creative and technical communications, as well as certifications in technical communication (CPTC), project management (PMP), proposal management (APMP), and content strategy, Kister provides a rare perspective that synthesizes best practices across traditionally siloed areas of business communications.
Metadata
Program
Science-Based Content Design
Series
Design Basics
Subject
Keywords
Affiliate Disclaimer
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.
