Color Guidelines

When applying colors to our UI, avoid common pitfalls by following these simple guidelines.

#1: Don't convey information using colors alone

Color can be a powerful way to make the UI easier to understand, but be careful not to rely on it. You should never trust colors alone to convey information. Instead, combine multiple visual cues; include text and icons! This helps users who are unable to, or have difficulty with, distinguishing colors.

Let's say you want to design for color blindness. One can, of course, go into the science of color blindness and try to choose colors that work well for those situations. An easier approach is to desaturate your UI, turn it black and white, and see how well it performs. Does it still provide a user-friendly experience? Great, your UI handles color blindness! If not, see if you can increase contrasts, add icons and text or change your wording, to allow your UI to perform well even when without using colors.

❌ Don't

Don't rely on colors to convey meaning. The two circles represents two completely different elements in the UI, but the only visual cue is their colors. Imagine looking at the same image in black and white, would you instantly recognize which is which?

🏁 Black and white (1)

By fully de-saturating your UI, you can easily find out if it's lacking from an accessibility stand point. Keep in mind, good accessibility should not be an afterthought in your work. If your UI is easy to understand by someone that is color blind, it becomes even more user-friendly for everyone else.

✅ Do

Convey meaning using a mix of colors, icons and text. This allows us to create UI elements with many "layers of clues" about its meaning.

⚽️ Black and white (2)

Good UI is easy to understand even when it's fully de-saturated. The UI elements are now easy to distinguish with the added icons and text.

#2: Use contrasts to focus attention

What are the most important elements in the UI you're currently designing? Those are the things that should stand out the most, and, therefore, require strong contrast with their surroundings. Strong contrast draws the user's attention, especially when used for backgrounds. Buttons, for example, are often design this way to instantly grab the user's attention.

Less important elements should create less contrast with their surroundings; these include things like hints and disabled input fields. Elements with low contrast tend to fade away into the background and is harder to distinguish, which prevents them from taking attention away from what matters most.

If everything stands out, nothing stands out! If everything creates equally strong contrasts, there is no hierarchy that helps the user understand what to focus on.

While different contrasts help establish a hierarchy, it's important to remember that this hierarchy is not set in stone. It changes dynamically as some UI elements become more important than others, often depending on the user's action. Colors are a great way to visualize this change. For example, selecting items in a list should increase their contrast with surrounding elements to show that they've been selected. Apply the same way of thinking for changes that are not caused by the user. For example, an urgent notification, such as a warning about the storage on a device being full, must create strong contrasts with other elements to be visible.

❌ Don't

Don't apply similar contrasts for UI elements that are fundamentally different. If everything looks the same, there is no indication what the user should focus on and the UI becomes disorienting.

✅ Do

Use contrasts purposefully to bring attention to what matters most. By giving clear visual cues about what to focus on, we create a hierarchy that guides the user in their interaction with the UI.

#3: Use strong contrasts for text and icons

Color contrast have a significant impact on the accessibility of our UI, especially regarding text and icons. Strong contrasts improve accessibility; it helps users read our text and see our icons clearly. Vice versa, weak contrast makes it harder to distinguish text and content blend together. To ensure excellent text legibility, we are committed to complying with the WCAG's level AA guidelines regarding color contrast between text and background. These guidelines requires a contrast ratio of at least 4.5:1 for normal text (under 18px) and 3:1 for larger text.

This website allows you to check the contrast ratio between a foreground and a background color then tells you if it fulfills WCAG's standards for text. Use this site to check if a color combination adhered to our guidelines.

When using white text on a colored background, you’d be surprised how dark the color often needs to be to meet WCAG's 4.5:1 contrast ratio. This can create hierarchy issues, since dark colored backgrounds tend to draw the user’s attention. You can solve this problem by flipping the contrast. Instead of using light text on a dark colored background, use dark colored text on a light colored background.

Both labels in the image above meet WCAG's 4.5:1 contrast ratio. The left one grabs the user's attention, while the right one blends into the background. Make sure to choose an approach that is appropriate for the situation you're designing for.

Too high contrasts, such as jet black on pure white, can feel unnatural or cause eye strain. Making text a lighter gray is a great way to de-emphasize, but it doesn’t look so great on colored backgrounds. A neat trick is to slightly decrease opacity of the text to allow some background color to bleed through. This approach prevents gray text from ending up on a colored background; and if the background behind the text changes color, the color of the text changes with it.

❌ Don't

Don't use low contrasts for text elements, especially for those that the user can interact with. The tab "Login" provides too low contrast between text and background (only 3.1:1), especially for something that the user can interact with.

✅ Do

Make text elements "pop" by providing strong contrast with their surroundings. The tab "Login" should stand out, even though it's deselected. In the example above, a light grey surface has been added behind the text to allow for greater contrast.

#4: Use our color palette to give visual cues

Similar to a traffic light, we can use colors to guide our users and help them understand our UI. Green indicates something positive, while yellow and red are associated with warnings and destructive actions. Learn more about how we use colors to convey meaning in our color palette.

We strongly encourage you to use our color palette. Besides emphasizing our brand's presence, using it actually boosts creativity and empowers you as a designer. As humans, we tend to get creative when working with a finite amount of resources.

❌ Don't

Don't add visual cues that are inappropriate for the situation. Actions that cannot be undone should always be treated with care.Don't provoke users into performing destructive actions.

✅ Do

Add visual cues to help the user understand the consequences of their actions. By clearly signalling that actions are destructive, the risk of accidentally deleting important content is decreased.

#5: Use our color palette in accordance with our color style

Using colors from our color palette doesn't necessarily make a digital experience feel like a Novacura experience. It is equally important to follow and understand our color style. While our color palette contains information about what colors we use, our color style describes how those colors should be used in a wider context.

❌ Don't

Don't forget to emphasize Novacura's presence. It doesn't mean that we should apply our brand color whenever we get the chance. Instead, apply them with subtlety. For example, we suggest using them for the arrows between elements to highlight how our platform "connects technologies".

✅ Do

Apply our brand colors in subtle ways. By using our color palette according with our color style, we emphasize Novacura's presence and provide a common thread in our UI. However, be careful not to intrude on our platform's rebranding capabilities. Keep this in mind before applying colors.

#6: Be consistent

In UI design, every color has a unique meaning. Novacura's products are no exceptions. Our colors have inherent attributes (things already associated with them) but are also assigned meanings depending on how we apply them in our UI. Therefore, we need to be consistent with how we use them.

Always remember that consistency is key! Colors must always mean the same thing, even if the context changes. Without consistency, colors lose all their meaning; confusion and chaos erupt. Make sure to follow already established practices, such as those described in our color palette.

It's important to realize that it not only what colors we use that determine their meaning in the UI, it is also about how they are used.

❌ Don't

Don't use different color cues for similar situations. The question mark and "LOG OUT" provide different color cues when the pointer hovers over them.

✅ Do

Be consistent by providing the same color cue for similar UI elements. If clickable items in a top-panel should become dark blue when the pointer hovers over them, make sure it applies to all items in that panel.