Simultaneous contrast: Make your colors work smarter

Working with color isn’t just about choosing hues that look good together. An effect that can enhance the color choices is simultaneous contrast.

This phenomenon can make your colors appear more vibrant and your values more contrasting. Let’s explore what the simultaneous contrast effect is and how you can make it work for you in graphic design, UI design, and more. It’s part of a series of tutorials on advanced color theory.

Jump to content in this section:

1. What is simultaneous contrast?

Red appears slightly different on each color, and the longer you look, the stronger the effect. Image source: Envato.

Simultaneous contrast is a visual effect where the perception of a color is altered by the colors surrounding it.

French chemist Michel Eugène Chevreul first explored this effect in the 19th century to understand why colors can look different depending on the other colors around them. Essentially, the contrast between colors is enhanced when they are placed side by side, making them appear more vivid and distinct.

For example, a grey square placed on a white background might seem darker than the same gray square on a black background. The surrounding color influences the way we perceive the central color.

2. Understanding the physiology and psychology

In a previous article, we discussed how cone and rod cells in our eyes detect color. I encourage you to read that if you haven’t already. In short, our brains only know about color from the relative activity across the red, green, and blue color receptors.

If there’s a lot of activity across all three but there’s slightly more activity on the “green” cones, we’ll register the same hue as we would if there was less activity overall but the proportion of green activity was the same.

Our visual system tends to exaggerate differences between adjacent colors because we are always comparing colors to each other. When colors are placed next to each other, their edges become more pronounced, and the contrast between them appears greater. The effect can be further intensified by the presence of complementary colors next to each other and the effect of the after-image.

The brain only knows about relative activity across the three cones. Image source: Drew MacDonald

3. Applying simultaneous contrast in graphic design

Screen printing on T-shirts with multiple ink colors. Image source: Envato

Using simultaneous contrast in your designs can significantly elevate the visual impact of your work. The effect can be particularly useful for print designers who are trying to limit the number of Pantone colors in a design or who want to work within the somewhat limited CMY spectrum. The following considerations will help you make the most of the simultaneous contrast effect.

3.1 Defining value keys

Understanding the values you can attain on a printed medium is crucial to implementing successive contrast. Mockup source: Envato

Value can substantially affect simultaneous contrast all by itself. In package design, we are often limited by the value of the substrate. A cream-colored box material, for instance, will limit the brightest value we can attain when printing over it and therefore limit the maximum contrast. We can, of course, use stickers or other labels on pure white paper to make up for the difference in contrast, but simultaneous contrast is a lot cheaper.

Illustrators often use value keys to provide the brain with a framework with which to judge contrast in the scene. Limiting the values will let the brain increase the contrast on its own. We’ll take the color of the paper as our brightest value and desaturate it. That will be the brightest value in our key. Now, instead of going to the absolute darkest value we can use, we’ll use a dark grey that’s about the same distance from pure black as our cream paper is from pure white. That will be the darkest value in the key. We want the brain to think of these as black and white, and we can add all of the other middle values we want between these.

3.2 Isolation

Boxes demonstrating different examples of isolation and simultaneous contrast. Graphic source: mockup and design from Envato.

Simultaneous contrast requires that our value structure be separated from the rest of the design. The more space you can provide around the area where you want to boost contrast, the better. In the case of our cream-colored box, we just need to extend the design to provide some space for the value key to work. Of course, the amount of space you dedicate to the design should prioritize the design principles. There just needs to be enough space for the contrast to appear increased.

3.3 Color & value

We first need to understand where pure hues sit on the value scale in relation to each other. Yellow, for instance, is a very bright color at full saturation. Placing it next to a dark or even medium grey will increase its apparent intensity, while placing it next to white will make it appear flat and dull. Blue, on the other hand, is much darker at full saturation and needs to be placed next to light values to achieve the most intensity.

3.4 Color complements

Complementary colors will make each other more intense when in close proximity, and after-images will increase that intensity with time. The choice of complementary colors needs to be balanced against accessibility considerations, however.

You will want to be careful placing complementary colors next to each other since vibrating boundaries will disrupt readability. Palinopsia may also be exacerbated by extensive use of complementary colors and vibrating boundaries.

4. Now you know about simultaneous contrast

In conclusion, understanding and applying simultaneous contrast can significantly enhance the effectiveness of your color choices in graphic and UI design. By leveraging this visual phenomenon, you can create more vibrant and engaging designs without relying on additional hues or complex techniques.

Value keys, isolating color areas, and employing complementary colors can be powerful tools for manipulating perception and elevating visual impact.

Mastering this effect allows designers to make smarter, more efficient color decisions, resulting in designs that are both aesthetically pleasing and functionally effective.

Thanks for reading! Continue learning on the Envato blog and check out how Envato designed its new logo.

Post date September 10, 2024

This content originally appeared on Envato Tuts+ Tutorials and was authored by Drew MacDonald