How Color Perceptions Impact Design

Colors hold meaning. They can evoke emotion and alter human behavior—and our perceptions of color are influenced by our culture and gender stereotypes that are embedded from birth.

However, these perceptions of gender-specific colors have changed over time. At one point in history, pink was associated with boys as it was perceived to be “stronger” color, whereas blue was more “delicate” and was associated with girls. It wasn’t until around World War II when retailers began the shift toward the societal norm of “pink being for girls.” That trend persists in today’s marketing as well with things like the pink tax, which contributes to gender inequality.

The meaning of color may also vary from culture to culture. If you’re designing for a global or multi-cultural audience, it’s important to consider different perceptions of color when making your selections. For example, the color red may convey passion and love in one place, but associated with mourning and violence in another.

To illustrate how we perceive color differently, we asked the p7 team to share a few words that come to mind when they think of the following colors:

• Red: passion, heat, angry
• Orange: warm, sunny, friendly
• Yellow: happy, comfortable, safe
• Green: clean, earth, calm
• Blue: nature, summery, peaceful, calm
• Purple: funky, indifferent, reverent
• Black: cool, stylish, calm
• White: clean, bright, fresh
• Brown: warm, dirty, earth

Even within our team, the ways we interpret different colors varies.

Beyond color meaning or perception, designers should also consider how their selected color schemes impact behavior within a user’s experience. For example, the contrast ratio between colors on a website is an important UX consideration to improve accessibility. Does a website have enough contrast between colors? Are buttons visible to a person with color blindness?

There are plenty of tools out there to help you create more accessible design. One easy way to test this is to open an image in Adobe Photoshop and see how it looks to someone with color blindness. Do this by selecting View > Proof Setup > Color Blindness.

So, the next time you’re working on a new design, ask yourself: What unintended meanings could my color selections have once it’s out in the world and being experienced by individual users?