Introduction
The relationship between color contrast and perceived darkness is complex. At a basic level, putting two colors with different lightnesses next to each other creates contrast. This contrast makes the darker color appear even darker by comparison. However, many factors influence how we perceive color and contrast. In this article, we’ll explore the basics of color theory, how contrast affects darkness, and when high contrast makes colors seem darker or lighter.
What is color contrast?
Color contrast refers to the difference in visual properties between two colors when seen next to each other. The main properties that create contrast are lightness, saturation, and hue.
Lightness contrast is the most significant type of contrast. It refers to how light or dark a color appears. Lightness is measured from 0 (pure black) to 100 (pure white). High lightness contrast is created when light and dark colors are paired.
Saturation contrast comes from pairing saturated, vivid colors with dull, muted ones. Saturation refers to the intensity of a color from greyish to fully saturated.
Hue contrast is created by complementary colors (opposites on the color wheel). However, hue contrast relies heavily on also having lightness and saturation contrast.
How does contrast affect the perception of darkness?
In general, contrasting a dark color with a light color makes the dark color seem darker. This effect is strongest when the colors strongly contrast in lightness.
For example, a medium grey will appear lighter against black and darker against white. Grey by itself has a lightness around 50%. Against white (lightness 100%), the grey takes on a darker appearance, maybe 40% lightness. But next to black (lightness 0%), that same grey will take on a lighter 30% appearance.
This effect is caused by simultaneous contrast. Our eyes and brain automatically compare adjacent colors, exaggerating the differences. The contrast created by juxtaposing colors alters our perception of their properties.
Factors that influence contrast effects
Several variables affect how much contrast changes the perceived lightness and darkness of colors:
Color area – Contrast has a stronger effect when the colored areas are equal in size. A small colored shape on a large background has less influence on the background than vice versa.
Distance – Contrast effects are strongest when colors are directly touching. As distance increases, the effect diminishes.
Color lightness – Dark colors are more affected by contrast than light colors. A dark gray will shift more against white than a light gray.
Saturation – Highly saturated colors create more contrast against unsaturated ones. But saturated colors are less affected by contrast than muted ones.
Surrounding colors – Contrast effects depend on all adjacent colors not just a pair. More extreme contrast in one area can balance out less contrast in another.
When does contrast make colors seem darker or lighter?
While contrast usually makes the darker color seem even darker, there are some exceptions:
Very dark colors – Near-black colors don’t darken much more against white. The contrast can make them seem slightly lighter.
Very light colors – Near-white colors don’t lighten much against black, instead appearing slightly darker.
Warm/cool contrast – Warm colors (red, orange, yellow) darken against cool backgrounds (blue, purple), while cool colors lighten against warm.
Saturation contrast – Saturated colors look darker and richer against grey backgrounds. But greys and whites won’t necessarily look darker against saturated colors.
Complementary colors – Strong hue contrast makes both colors appear more saturated. But it doesn’t consistently darken one of the hues.
How to use color contrast deliberately
Understanding these contrast principles allows designers to use color more deliberately. Some applications include:
Emphasize a dark color – Contrast a target color against a very light background to make it seem richer and more saturated.
De-emphasize a color – Surround a color with similar lightness and saturation to make it recede. Reduce contrast to make it appear lighter.
Neutralize a color – Transition between strong colors with intermediate greys and gradients to balance contrast effects.
Make lights lighter – Pair light tints with darker shades to increase the sense of illumination.
Make darks darker – Use a light surround to make blacks and shadows feel deeper and moodier.
Warm up or cool down – Add warmth with orange contrast or coolness with blue contrast.
Conclusion
Contrast makes colors appear darker, lighter, richer, or duller depending on the specific colors involved. Dark colors are especially impacted, shifting against light backgrounds. But very dark colors may get slightly lighter with high contrast. Cool colors also tend to intensify against warm backgrounds. Understanding contrast allows designers to use it purposefully to alter color perceptions.
Example Table
| Color 1 | Color 2 | Contrast Type | Effect on Color 1 |
|---|---|---|---|
| Dark grey | White | Lightness | Appears darker |
| Light grey | Black | Lightness | Appears lighter |
| Saturated orange | Muted green | Saturation | Appears more saturated |
| Red | Blue | Hue | Slightly darkened |
This table shows example color pairs that create different types of contrast and how the contrast affects the perception of the first color. Lightness contrast has the strongest darkening/lightening effect. Saturation and hue contrasts alter perceptions of richness and temperature more than lightness.
