Read time: 6 minutes
Working at Unity Web Agency has given me insight into the population who experience colors differently, like those with color blindness (Trichromacy, Anomalous Trichromacy, Dichromacy, and Monochromacy).
Working with color energizes me — exploring, understanding, adapting, and applying color principles is essential in my work. Traditionally trained as a graphic designer, I have learned from a variety of teachers and continue to explore new perspectives. I wanted to share some useful information and some of my favorite tools and concepts that may be helpful on your journey.
“In visual perception a color is almost never seen as it really is — as it physically is. This fact makes color the most relative medium in art.”
I'm always learning more about color theory. Especially the use of primary, secondary, and tertiary (mixing two secondary colors) color as it applies to accessibility. I carefully look at color differently than most people. Squinting my eyes to compare and contrast, drawing on my experiences, evaluating, and analyzing. I consider how, when, and where color could benefit. Not only the projects I work on but, ultimately, the individuals who will use or view my work.
A bit of history
One of my favorite podcasts is from Radiolab: Color. The program discusses Isacc Newton when he was stuck at home during the plague and questioning:
“What are colors and where do they come from?”
Sir Issac Newton is one of the early contributors to what we know today as the color spectrum, also presented as a color wheel. Using a prism and shining a beam of pure light through it, he determined that pure light was made up of these colors from the experiment:
Red, orange, yellow, green, blue, indigo, and violet (ROYGBIV).
Johannes Itten was a Swiss expressionist painter, designer, teacher, writer, and theorist in the early 20th Century. His seven theories of color contrast provided an instructional understanding of how to control and apply color for future generations:
Contrast by hue is where two hues (a color or shade) are on the opposing sides of the color wheel. We see black and white as opposing and, in the same way, red opposite of green with traffic lights. When looking to contrast hues, true hues (primary colors) are the best place to start.
A good example of high contrast is hues blue and yellow. Using the same sample of blue, and swapping out yellow with green, you'll see that these hues have a lower hue contrast. The yellow square is much brighter and sharper around the edges and shows more contrast. On the other side, the green square is duller and softer around the edges and has lower contrast.
When utilizing colors in your information, keep in mind that people usually only remember five colors.
So choose your colors carefully.
Contrast by value, also known as lightness or tone, is a series of contrasts between black and white, specifically the stages of gray. Any two hues with a similar value will have low contrast, and people will have difficulty seeing the difference between hues, especially if color is used in the text.
We want to avoid these instances when content is not easily recognizable and needs to be read. In general, the eye can distinguish the difference between 20 (older people) to 40 (younger audiences) values.
Contrast by temperature refers to the relative position of a hue on the color wheel. An easy way to remember the color wheel is ROYGBIV:
Red, Orange, Yellow, Green, Blue, and Violet.
Throughout the year, we experience warm summer days and cool winter nights. We associate warm temperatures with yellow, orange, and red, while cool temperatures with ice and water are mainly blues. And for greens and violets? They can have qualities of both.
In application, warm hues can look like it advances or comes forward, while cool colors look like it recedes or moves backward. This theory can be very powerful when used in compositions creating depth and impact. Additionally, a warm hue can look warmer next to a cool hue, while a cool hue can look cooler next to a warm hue.
The purple square on the left is perceived cooler inside the orange square while the orange square on the right is perceived warmer on the right.
Contrast by complements, sometimes referred to as neutralization, is the use of contrasting hues.
Typically, one hue is cool and the other is warm. Complementary hues appear on opposite sides of the color wheel. True compliments combine to neutralize each other and results in a type of middle gray.
An interesting exercise is to create a checkered pattern with two purely opposite colors. If the perception of the pattern mixture is visually gray, the two hues are true complements such as true red and true cyan. When the scale of the checker pattern becomes small enough, the result can be seen as one color — gray.
The illustration below helps explain this theory.
Simultaneous contrast is a visual effect that can appear to shift a color's appearance to its complement.
French chemist, Michel Eugène Chevreul, who discovered this phenomenon in 1824 while working at a dye manufacturer in Paris, found that the colors of two different objects affect each other. The effect is more noticeable when shared between objects of complementary color. This is different than contrast by hue, which refers to one object's difference in color, luminance, or light intensity compared to its surroundings or background.
The same color square looks brighter on the left than the square on the right when place into different colored fields.
Contrast by saturation is the relationship of a pure or vivid hue against a hue that has been dulled with whiteness or darkness.
A hue is fully saturated when it is at its maximum intensity. Saturation gives a hue brightness or dullness and impacts the vividness and intensity of the hue. Any hue has low saturation when it approaches gray in color. This theory can be useful when crafting a visual balance and enhancing legibility.
Conceptually, the illustration below shows how the selection of saturation can determine readability.
Contrast by extension is the difference between a lot of one hue and a little bit of another hue.
Basically, we're talking about proportions.
This is achieved by choosing relative shapes in relationship to the perceived weight of color. This is where you would use the heavier looking color in a larger area and a lighter looking color in a smaller area.
Johann Wolfgang von Goethe set chromatic colors “light values” to quantify the visual impact of certain colors. This theory quantifies color and provides an objectiveness to the application of color.
Using these values we can see that little amounts of yellow will visually look more saturated, especially when used with purple, and blue: Yellow 9, Orange 8, Red 6, Violet 3, Blue 4, Green 6
Coming up...
We will be posting a series of posts with some thoughts, ideas, and useful tools related to the art, science, and technology of color.
So stay tuned for more soon!
