The use of color is important in our work, for both those that can see color and those that cannot. Click through the tabs below to review some color theory basics, graphic design concepts and how color blindness impacts our work.
Color theories create a logical structure for color. A color circle, based on red, yellow and blue, is traditional in the field of art. Take a look at the color wheel to familiarize yourself with the colors and their relation to one another on the color wheel. Once you’ve looked over the color wheel, read the terms below to review the terms Primary, Secondary and Tertiary Colors.
Primary Colors: Red, yellow and blue
In traditional color theory (used in paint and pigments), primary colors are the three pigment colors that cannot be mixed or formed by any combination of other colors. All other colors are derived from these three hues.
Secondary Colors: Green, orange and purple
These are the colors formed by mixing the primary colors.
Tertiary Colors: Yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green.
These are the colors formed by mixing a primary and a secondary color. That's why the hue is a two word name, such as blue-green, red-violet, and yellow-orange.
In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer, and it creates an inner sense of order, a balance in the visual experience.
When something is not harmonious, it's either boring or chaotic. At one extreme is a visual experience that is so bland that the viewer is not engaged. The human brain will reject under-stimulating information. At the other extreme is a visual experience that is so overdone, so chaotic that the viewer can't stand to look at it. The human brain rejects what it cannot organize, what it cannot understand. The visual task requires that we present a logical structure. Color harmony delivers visual interest and a sense of order.
There are many theories for harmony. Below are a couple of the most common color relationships used to create harmony in design.
Analogous colors are any three colors which are side by side on a 12-part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors predominates.
Complementary colors are any two colors which are directly opposite each other, such as red-green, red-purple and yellow-green. These opposing colors create maximum contrast and maximum stability.
Color blindness is the inability to perceive differences between some of the colors that non-colored impaired users can distinguish (Wikipedia). Color blindness affects about five to eight percent of males (approximately 10.5 million) and less than one percent of females.
The challenge of designing for color blindness is because it is hard to determine what color blind users see and how that is different from what the average user sees. The best way to ensure our images are visible to the most viewers possible is through contrast.
Contrast means that one item is different from another. For instance, catch the reader’s eye, create emphasis, or call attention to something important. There are various strategies for creating contrast. You can use color, adjust the size, shape, or visual weight of an object, or use contrasting styles of text. We always want visual references to have two identifiers, such as color AND pattern or color AND shape.
For example:
Request
[Insert Image: background ID-1315684562 & Petunia the purple robot ID-1188003934; Place the purple robot on the city background.]
Context
The lesson is introducing Petunia to students to guide them through the city and help them learn about city resources. Since Petunia is the subject of our image, she should be the first thing the students see. We can achieve this through thoughtful consideration of scale & color.
Look at the two sample images below and click on each to see the differences. Can you tell which image is using scale and color for better visibility?
The easiest way to check the contrast of your work is to view it in grayscale. This will show you what your work looks like in black and white and show you areas that may require more contrast. You can set this up in Adobe by establishing a grayscale print preview.
To Set up print preview in Illustrator: View > Proof Setup > Customize and set the Device Simulation to sGray.
Before you save your graphics, use View > Proof Colors to see your work in grayscale to ensure the image has appropriate contrast.
Click on each image to view it in grayscale.
We can see that even when contrast in black and white is still low, scale helps us identify the focal point of the image.
In addition, you can use the following simulator to view some of your images through the lens of different types of color blindness.
Here are some additional color resources that you may find helpful!
Contant for this page was obtained, in part, from the following resources: Color Blindness & Web Design - Usability.gov | Color Matters welcomes you to the world of color: Symbolism, design, vision, science, marketing and more!
