Design and functionality are core elements of good webdesign. But there is one other essential aspect that is often criminally overlooked. David, our UX Designer, took the stage during our last company get-together to talk about the use of colors in webdesign. Here’s the rundown:
Some readers may have encountered the phrase: “There is no wrong color. Only incorrectly used color.”
And we find variations of this approach scattered all over the internet, like the use of oversaturated colors in dark modes. If a website supports dark mode, it’s better to avoid bumping the saturation up to prevent the colors from looking too flagrant and tacky. Mildly saturated colors are, quite literally, easier on the eyes, which is especially vital for reading text.
But if we discover the quote’s origin, a wonderful path of knowledge opens before us.
The recommended dark mode color desaturation level from the authors of Material Design (Google)
The original quote comes from Josef Albers’ Interaction of Color, the German painter’s massively influential book on color theory, art, and design. This fairly straightforward and unexpectedly poetic journey is accessible to everyone because it doesn’t explain its principles but shows them. Albers noted that his goal was never to teach people art theory, just help them see better. And the book will do just that, whether you’re a UX designer or just someone interested in color perception.
This interaction of colors is crucial for webdesign — as a designer, you’re always tasked with keeping users engaged, prolonging their time of visit and eliminating all potential obstacles. Infamously, colors pose great threats if misused, and subjectivity isn’t the only factor at play. Think of clumsy grading, oversaturation, or mismatched colors. Each one is a reason to close the window.
The differences in perceiving color based on varying backgrounds (Interaction of Color | Josef Albers)
Red bricks on black and white background (Interaction of Color | Josef Albers)
The essential role of the background is a good example.
The images above highlight the importance of the background on two identical colors, which are perceived as two different, and two different colors, which are perceived as identical. Based on the background alone, our perception of its hue shifts. Plainly speaking, the color gains/loses intensity only after interacting with a partner. This is best observed on squares with a red-brick background — their saturation and distinctiveness are especially noticeable with a black background. Therefore, text fonts and graphic design are more influenced by the interaction between the primary and the secondary color rather than their individual properties.
Top to bottom: Shifts in hue, luminance, and saturation on various backgrounds (Interaction of Color | Josef Albers)
The image above shows that the secondary color can further influence other aspects when used creatively. The green squares show two levels of luminance based on the choice of background. Dark blue leaves them far more pronounced than creamy yellow.
The pink squares below showcase the use of saturation. The pink is clearly elevated on a solid yellow background, grabbing our attention and invoking playfulness and energy. However, after the background switches to a similarly saturated secondary color, the primary suddenly looks washed out and faded.
What does that tell us? Even the most vibrantly saturated colors can be perceived as dull.
Naturally, color perception is highly subjective, and some combinations won’t ever feel right for you even if used correctly. Still, every color can shine bright. But it must be applied thoughtfully in overall design and typography context. Their quality stems from interactions with other design elements.
Labers’ book is a wonderful introduction to color observation, especially if you’ve never done so before. It’s an invaluable source of inspiration for students and designers who want to test the sensitivity of their visual perception. It won’t teach you any marketing theories about aggressive or calming colors, and it won’t give you any definite answers on which colors sell.
It’ll teach you how to see better — a skill you’re just as likely to use outside of webdesign.
