Adobe Creative Cloud

September 29, 2015 /UX/UI Design /

The Importance of Color in UX

Messages of color

Color is an incredibly powerful part of the designer’s arsenal, and of a user’s experience. With great power, comes great responsibility! Color has many cultural connotations. In Eastern culture, we can think of examples like gold being associated with prosperity and luxury. This means, for example, that the introduction of the gold iPhone was seen as a big bonus for the Eastern market. Social norms and cultural connotations around color evolve over time. A few good places to start when designing include thinking a bit about the cultural context you are in, for example, what are competitors using? In the tech world, you may have noticed the proliferation of blue icons and logos. Blue is associated with trust and stability in the western world, and frequently comes out on top as the world’s favourite color in surveys!

Designing palettes

As well as thinking about cultural context, at the outset of a project, find out if there are brand guidelines or style guides in place. These often provide parameters to work with when creating color palettes. However, bear in mind that some brand and style guidelines are legacy documents from print era, or may not have been created with web accessibility in mind. This is a perfect opportunity to guide the project towards a web accessible palette.

When creating color palettes, there are several different types. Analogous color schemes utilize colors that are next to each other in the color wheel. Triad color schemes comprise of colors that are equidistant from each other in the color wheel, and complementary schemes are opposite each other. Adobe Color CC is an awesome tool that can speed up exploring various color scheme options.  

colorux 1

An analogous color palette in Adobe Color CC.

Accessibility Considerations

Accessibility is a key consideration when designing with color. Color blindness affects approximately 8% of men and 0.5% of women, and means that people have a decreased ability to perceive color differences. Certain people may see something very different to what you are seeing in your design work! It also means we need to carefully check contrasts to ensure that background and foreground colors appear with enough contrast to a color blind person, or someone with low vision.

A simple way to get started doing this is to look at your work in grayscale. This is a good first check to ensure contrast, as well as not relying just on color to communicate. Can you tell where the buttons are? Do links still look like links? Is there a clear hierarchy of information?

Further to this, Photoshop has really useful tools to help. Get in the habit of checking your work. First, ensure you are working in RGB color mode, as this will give the most accurate picture. Then, under the view menu, select Proof Setup > Color Blindness – Protanopia Type, or Color Blindness – Deuteranopia Type. This is a very easy and fast technique that can immediately reveal challenges with the information design.

colorux 2

Photoshop tools can show you what your design might look like to someone with Protanopia type color blindness.

Another useful tool is Color Contrast Analyzer which can help in determining the legibility of text on background colors. The tool allows you to input the hex value of background and foreground color, and identify which level of WCAG 2.0 Accessibility Guidelines you are meeting. It also provides information on the contrast ratio, which is a crucial component of meeting accessibility guidelines.  

colorux 3

Color Contrast Analyzer can evaluate whether your color choices meet accessibility standards. Note that, while it does depend on the font, as a rule of thumb, ‘large’ text is considered to be 19px bold or 24px regular and above.

 

Affordances and CTAs

When designing, it is important to not rely solely on color to communicate, as color is relative. Some people may not be able to perceive the differences in color that are clear to the designer. Try to include other means of communicating, such as icons, text, or patterns.

colorux 4

The Slack status indicator is a good example of not relying solely on color to communicate differences in states.

A key place to consider color is in the main call to action (CTA) on a page. It is crucial that the button color has enough contrast to stand out sufficiently on the screen. Thinking about the UX of a button, it needs to look like a clickable element. color cues in combination with rounded corners are often a successful way to achieve this.

colorux 5

The ‘buy now’ button is a great example of using color, contrast and rounded corners to draw attention to the key CTA on the page.

While there is no magic bullet or one-size-fits-all color guideline, thinking about contrast, color and shape in the context of the screen you are designing will ensure your primary calls to action get actioned!

In summary, if you want to create excellent UX for a broad range of people, color is a crucial component! It should definitely not be an afterthought. Carefully consider the connotations and implication of your color choices, and test them for accessibility.

UX/UI Design