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 logo
Science-Based Content Design©

Check out our first premium online program!

Tina M. Kister
July 11, 2022

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.

Before 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)
page colors light
Single Value (Dark)
page colors dark
Multiple Values
page colors variations

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

Checkershadow Illusion by Edward H. Adelson. Animation by Tina M. Kister, InfoDev Academy, Nanatoo Communications, 2022. All rights reserved.
checkerboard square colors in context

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
August 6, 2022 8:24 pm
URL

Contents

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.

Recent Posts

Success!

Thank You!

mascot rudy the writer dog

Welcome to Our Email List!

You should get an email from infodevacademy.com within the next 10 minutes. If you don’t see it, be sure to check your Spam, Junk, and Promotions folders. And don’t forget to add infodevacademy.com to your trusted contacts!

If you need help, contact us at [email protected].