Color Guidelines
When applying colors to our UI, avoid common pitfalls by following these simple guidelines.
Last updated
When applying colors to our UI, avoid common pitfalls by following these simple guidelines.
Last updated
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 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?
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 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.
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 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.
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 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.
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 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".
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 use different color cues for similar situations. The question mark and "LOG OUT" provide different color cues when the pointer hovers over them.
