UI color psychology map
In this section, I’ll take you through my UI Color Psychology Map, in Figure 15. It’s my number one tool for building color palettes with a clear visual hierarchy. The example in Figure 15 is what we use in AlterSpark when we have no design constraints.
You can use the UI Color Psychology Map when designing or upgrading color systems, especially when you’re under pressure to balance many competing demands across your brand, existing design standards, accessibility requirements, emotional goals, and behavioral psychology objectives.
How the UI Map works
The UI Color Psychology Map has two parts, greys at the bottom and colors at the top. Both follow the same ballpark pattern, moving from the least to the most arousing as we move up. We know from studies that the arousal level jumps around quite a bit, so think of this as a bigger picture map with many details you need to keep in mind.
In the greys, when you build on whites with dark contrast, you’ll be in the zone of positive comfortable emotions, with a strong ability to draw users’ eye.
The top color chart follows the wavelength, up from 400-700 nanometers. It doesn’t include non-spectral colors, so there are no browns, pinks, or red-violets.
There are just a few parts of the color spectrum that are best for grabbing attention. The cool blue zone is a good space for positive feelings with decent salience, and a comforting general-purpose feel. Blue-green (turquoise) is a great color for drawing attention plus it comes with comforting associations.
The hot colors are better for grabbing attention and raising salience. Since reds have negative emotional and cognitive associations, I tend to use them for high-priority attention-grabbing when there’s something mission critical, like a threat or obstacle. I also use them for pressure motivators.
Calibrating a color hierarchy
I use the color map like a literal hierarchy. Cranking up the salience means moving closer to top red, while turning down the salience means moving towards bottom cool colors, and then down to the grey zone.
Since the colors don’t follow a perfect linear progression from low to high arousal, we normally force the colors into a visual hierarchy. In other words, we tweak the shade, saturation, etc.. till red dominates all other colors, green outranks blue, and all accent colors draw more attention than the greys.
How we build color systems
At AlterSpark, I normally build color systems with Rena, our Creative and UX Director, who happens to be my sister.
In most cases we prefer to start with a white background, add grayscale structures, and then add accent colors on top. For the greyscale palette, I prefer to build on a black, white, and grey structure, with a good aesthetic feel.
Next, I’ll work on finding ballpark accent colors that have distinct contrasts, appropriate emotional associations, and symbolic meanings. I use the UI Color Psychology Map to think through some of the competing design goals and challenges.
Once we rough-out the color system, Rena uses AA and AAA contrast ratio tools to calibrate the palette, while testing its performance under various design conditions.
It’s a lot of work. But if it’s done well, you’ll have a robust color system that will serve you for years to come.
You may have noticed that my default traffic-light inspired color palette is a problem for some color-blind people. We have a dilemma, as the worldwide use of traffic-light colors makes it an attractive choice for boosting cognition, but an insensitive choice for some color-blind users.
The UI Color Psychology Map will help you spot where your palette is least accessible. I’ve marked the most prevalent color-blindness zone covering red-green that affects 7-10 % of men, and many forms of color blindness are in this area, so it’s a bit of a danger-zone.
Once you know where your problems exist, you’ll be able to do something about it. Treat this color-blindness zone with sensitivity, by reducing the number of colors, and ascribing fewer cognitive associations to there colors.
If you want to build in the danger zone, you’ll at least know where your problem exists, so you can find workarounds to boost your accessibility, like modifying contrast ratios, adding symbols, etc…
At the end of the day, you need to test your design against multiple criteria, with accessibility being one of the top priorities.