How do I choose system colors (e.g., success, warning, error colors)?
TL;DR
- Start by reviewing your brand guidelines to ensure consistency with your company's identity.
- Prioritize accessibility by checking that your colors meet the WCAG 2.1 contrast ratio requirements using tools like WebAIM's Color Contrast Checker.
- Consider using familiar color associations – green for success, yellow for warning, and red for error – as these are intuitively understood and help convey messages quickly.
- Be open to deviating from these norms when necessary.
- Apply your colors consistently across your application to maintain usability and avoid confusion.
- Remember to balance creativity with industry standards for a professional yet fresh look.
Deep dive
When selecting system colors, consider the following steps to ensure a cohesive, accessible, and user-friendly color scheme:
- Review brand guidelines: Check if your company has existing brand guidelines that specify system colors. If so, follow these guidelines to maintain consistency.
- Assess color accessibility: Ensure that your chosen colors meet WCAG 2.1 contrast ratio requirements. Use tools like WebAIM's Color Contrast Checker to verify that your colors are distinguishable and readable for users with visual impairments.
- Consider color associations: Consider using commonly understood color associations, such as green for success, yellow for warning, and red for error. These associations are deeply embedded in user expectations and can help convey the intended message quickly. However, there are times when straying from these standard colors is necessary, which we'll discuss shortly.
- Maintain consistency: Apply the chosen colors consistently throughout your application. Use the same shades for all success, warning, and error states to avoid confusion and improve usability.
Diving into the topic of color associations. Users have preconceived associations between colors and meanings based on cultural and personal experiences.
Consider using the psychological impact of colors to convey the intended message effectively.
Red
Red is a bright color that quickly draws the eye and prompts fast decision-making.
Error indication: Commonly used to highlight errors, especially when paired with a cross icon, red effectively communicates that something is wrong.
Emotional connotations: Red, associated with emotions like love and passion, appears in features like 'Like' buttons, often in shades like Berry Red.
Deletion and closing actions: For actions like deleting files or closing accounts, red encourages users to think carefully before proceeding.
Green
Positive actions: Green is often used for confirming actions or indicating success due to its association with "go" or progress. Green is calm and reassuring, making users feel secure in their decisions.
Approval and completion: Green is frequently seen in 'Completed' statuses or approval indicators, reinforcing the idea of completion and correctness.
This does not mean that shades of red or green can’t be used as the primary color. Take Medentry, one of our projects, for example, where red does not mean danger, passion, or deletion of an element
Yellow/orange
Warning signals: Yellow or orange captures the user's attention with its bright, warm hues, functioning effectively as a warning color. It's used to signal caution, advise of potential issues, or highlight the need for user intervention without implying immediate danger.
Urgency with optimism: While yellow or orange indicates urgency, it also carries a more optimistic tone than red, making it suitable for warnings that require user attention but don’t denote a critical error.
The range of shades from yellow to orange allows for flexibility in matching the warning intensity to the application's design aesthetic, ensuring that alerts are noticeable but harmonious within the overall color scheme.
Blue
Non-urgent informational notifications: Blue is commonly used for informational alerts or messages such as new feature announcements or reminders. It's a color that suggests calmness and stability, making it ideal for conveying information without alarming the user.
Hyperlinks: Blue is traditionally used for hyperlink text, guiding users to click for more information or to navigate to a different page.
Progress indicators: Often seen in progress bars or loading animations, blue suggests a process is underway without alarming the user.
Pro tip: Review color schemes used in similar applications and consider user expectations. Strive to balance creativity with sticking to industry standards to keep it professional yet fresh.
❓Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.
- How do our chosen colors align with our brand identity and values?
- Are our color combinations accessible and distinguishable for users with visual impairments?
- Do our color choices effectively communicate the intended message (e.g., success, warning, error)?
- How do our system colors compare to industry standards and user expectations?
- Have we conducted user testing to validate the effectiveness of our color choices?
⚠️ Common mistakes to avoid
Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.
- Relying solely on personal preferences or aesthetics when selecting system colors.
- Neglecting accessibility guidelines and failing to ensure sufficient color contrast.
- Using colors inconsistently throughout the application, leading to confusion and cognitive overload.
- Overusing bold or vibrant colors, which can be visually overwhelming and distract from key information.
- Ignoring user feedback and failing to iterate on color choices based on insights gained from testing.
🛠️ Useful tools
These tools will make your job easier and more effective.
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
Using Red and Green in UI Design by Nick Babich
📚 Keep exploring
Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.