Color Assimilation and Its Impact on UI Design

Using color in a reasonable way is key to creating clear and usable user interface (UI) designs. But since people can react to colors differently, UI designers often hear “Could we use a different color?” in response to their design decisions or recommendations. The answer usually boils down to “It depends.” Why? Before we can answer that, it’s important to understand what color is, how it’s perceived and how it can affect users – both negatively and positively

When people “see” a color, they actually experience a sensation, which, by its nature, is subjective. What affects the way people perceive colors is their physiology and the psychophysiology of seeing. This article focuses first on these two aspects, because they build the foundation for a more detailed explanation of issues related to UI design. Both areas are closely interconnected and have some overlap, which is why they should be discussed together. But because these fields are broad, this article will only briefly cover the key aspects needed to understand the role of colors in UI design and their impact on users’ visual perception.

How colors are formed

Eye physiology and the process of seeing things are the main forces that impact users’ visual perception. In her book Psychophysiology of Vision, Part 2: Color, Agata Mączyńska-Frydryszek writes, “The sight organ and color vision are specific qualities that were formed through evolutionary development, because light as a basic life energy led to the formation of nerve cell clusters (…) sensitive to the reception of light energy.”

The retina has photoreceptor cells, which include a cluster of cones that react to light of various wavelengths by sending electrical signals to the brain. This creates a response in the form of experiencing color. These cones can be divided into three groups based on the wavelengths they react to: blue, green or red light. In their full range, the wavelengths give the impression of pure colors – the three primary colors. However, once additional information is added to the various types of photoreceptors, the impression of intermediate colors (or color shades) is created. Depending on the intensity of stimulation to the different photoreceptor types, people can see different color shades and saturation. In fact, on average, people can distinguish around 250 pure shades, around 17,000 mixed tones and around 300 shades of grey.

If that’s how people come to perceive the three primary colors – blue, green and red – and color shades, how do they experience white and black colors? The impression of white forms when all the types of cones are stimulated to the same extent. Similarly, people see black when there is no stimulation at all (source 1) . (That’s why our UX & UI design team usually recommends adding a dark mode to products, as many users find this option more attractive.)

Color models

Color models further explain how colors are formed and perceived. The German artist, statesman and scientist J. W. Goethe studied the impact of color phenomena on people and their moods (source 2). He categorized them based on their physiological and mental effect. Based on his research, Goethe devised “model basics for combining colors in a palette (…), established contrasting colors alternating in a color wheel, described the phenomenon of an afterimage in complementary colors, noticed and explained color intensity.” (source 3)

Further research on color has resulted in various different models from other scientists, such as Helmholtz, Bernson, Mayer, Lambert, Runge and Chevreul. Why is this important? Virtually every designer has probably used commonly available programs that help you pick the right tones for any color, depending on if you’re looking for complementary, analogous or monochromatic palettes. Keep in mind that the color models you can access in these apps were once created based on research on visual perception and were not formed randomly.

M. Harris’ color wheel diagram. Source: Stanisław Popek, Colors and man’s psyche (perception, expression, projection), 1999

Parramon’s unfinished color range. Source: Stanisław Popek, Colors and man’s psyche (perception, expression, projection), 1999

Color palette. Source: Adobe Illustrator

How color assimilation impacts UI design

The wrong color combination or lack of knowledge about color relativity might result in an illegible design (or, in technical terms, a design that upsets users’ photoreceptors) that contains incomprehensible and unclear information architecture. If that’s the case, you’re encountering unfavorable color assimilation, which is outside a designer’s control. But what is this color assimilation and what does it impact?

Color assimilation happens when the colors of neighboring elements affect each other – or, in other words, when they appear similar to people perceiving them, even if, in reality, they’re not. Unlike color contrast, assimilation can make it seem like colors are blending together, which reduces the contrast between these shades. You can observe this effect when you’re looking at smaller color fields which are surrounded by larger “spots” in a different shade.

In terms of UI design, understanding color assimilation is necessary to create clear, visually attractive designs, as it has a real impact on the reception and perception of information architecture and the overall esthetic impression of a project. This element shouldn’t be ignored or downplayed as it significantly affects such interface elements as:

• Buttons and backgrounds

If buttons on a website are a color that’s very similar to the background color, they may seem bigger or blurred because of color assimilation. This could be a positive or negative effect, depending on the result you want to achieve. Subtle assimilation can make an interface seem more cohesive, but too much assimilation leads to readability problems.

• Small graphic elements

Icons or other small elements that are placed on a color background may seem smaller or bigger than they are, because they’ll optically “change” their color to match the dominant shade – in this case, that of the background.

• Text on a color background

Color assimilation may affect the perception of text color on a color background, which could result in reduced contrast and readability. That’s why it’s important to consider this effect, especially in terms of accessibility and user-friendliness, when picking colors for your UI designs.

• Progress bars and indicators

In progress bar and indicator design, color assimilation may impact the way users see and follow their progression. Subtle color differences may make a progress bar seem fuller or less full than it is in reality, which can lead to misunderstandings.

• Small interactive elements, such as toggles and other controls

Because of color assimilations, toggles and other kinds of controls might become more difficult to notice or discern in an interface. If the shades are too similar to the background or other elements, it will mislead users’ vision, which should be avoided.

UI design that gives color to your solutions

Color perception is a complex issue, and designers need to be aware of its mechanisms and their significant impact on visual design. As this article has demonstrated, any discussions about this issue have to also involve an exploration of matters related to the psychophysiology of vision. Along with technical aspects of color management in UI design, awareness of vision-related issues, combined with artistic sensitivity and deep understanding of the psychological and physiological impact of color on users, should be the basis of effective designs that attract users.

That’s why companies who want to make sure their solutions offer both a memorable look and intuitive user experience are partnering up with UX & UI experts like Software Mind. Our UX & UI team precisely understands how color affects users and how it can be leveraged to enhance user interactions with digital products. To learn more about how our experts can help you craft rewarding user experiences for your solutions, get in touch with us via this form.