Design
Color
Learn Color with the Practica AI Coach
The Practica AI Coach helps you improve in Color by using your current work challenges as opportunities to improve. The AI Coach will ask you questions, instruct you on concepts and tactics, and give you feedback as you make progress.Intro to Color Theory
The study of color theory is essential in understanding how colors interact with one another, and how they can be used to create visually appealing designs. It includes the primary, secondary, and tertiary colors, as well as color harmony and contrast.
A short history of color theoryColor theory has a long history with roots in both art and science. Early theories were based on observations and speculation, while later scientists like Newton and Goethe used experiments to understand the nature of light and color perception. Many artists created color models to represent color relationships, but they often failed to create perceptually uniform scales. Munsell created a more accurate system dividing color into hue, value, and chroma. The Bauhaus school produced influential works by Itten and Albers focusing on the subjective experience of color. There is no single theory of color harmony, as color perception is complex and subjective. Today, subtractive CMY and additive RGB color models are used in printing and displays respectively. While the science of color is well understood, designers still lack proper tools to visualize and work with color in a meaningful way.
Super Practical Guide to Color TheoryColor can be perceived differently depending on one's senses and cultural associations. To choose UI colors effectively, think of colors like a painter in 6 categories: jewel tones, pastels, earth tones, neutrals, fluorescent, and shades. Each category has an ideal range of saturation and brightness. Combining categories by adjusting hue, saturation and brightness creates balanced palettes. Neutrals paired with one other category make the best UI designs. Referencing different disciplines provides analogies that help us apply color theory practically as UI designers. What matters most is using color to create the best user experience.
Why Are Colors Important in Product Design?
The Psychology of Color and Emotional DesignColor plays an important role in emotional design by impacting visitor emotions and behavior. There are three dimensions of emotion - arousal, pleasure and control - and colors have different associations with each dimension. For example, red and yellow induce arousal while blue induces pleasure. Understanding these color psychology principles can help designers target the four motivational quadrants: optimistic emotions to motivate through rewards, pessimistic emotions to motivate through fear, insecure emotions to motivate through threat avoidance, and secure emotions to build long-term loyalty. However, color associations are complex and depend on cultural context, so testing color choices on the target audience is recommended.
Color Contrast & Accessibility
Color contrast is crucial in creating accessible designs for individuals with visual impairments. Understanding the contrast ratio between foreground and background colors is key in meeting Accessibility standards. Additionally, color blindness affects a significant portion of the population, and designers must consider this when creating color schemes.
Designing for accessibility, step 1: Color contrastEnsuring adequate color contrast is an easy first step towards making a website accessible to people with disabilities. The WCAG 2.0 AA standard requires at least a 4.5:1 contrast ratio between text and background colors. While making design changes to meet Accessibility standards can be challenging, not doing so means excluding users and failing to provide an equal experience. Google Chrome and Twitter have made adjustments to their color palettes to meet the AA contrast standard. While some companies acknowledge the importance of Accessibility, they may prioritize maintaining their design language over making necessary changes. However, prioritizing Accessibility over design unity is important to ensure all users can access a website. Ensuring good color contrast is a good place to start the journey towards a fully accessible product.
Designing accessible color systemsStripe updated the colors in their user interfaces to improve Accessibility. They found existing tools were limited, so they built their own tool using a perceptually uniform color model to provide real-time feedback. This enabled them to create a color palette that was accessible, had clear vibrant hues, and maintained visual weight. By translating their colors into the CIELAB color space, they could adjust colors based on perceptual contrast. Their new default text and icon colors now meet Accessibility contrast guidelines, and any two colors are guaranteed to have sufficient contrast for different text sizes. Building their own tool helped them rapidly iterate on a color palette that was both accessible and vibrant.
Case Studies
Case studies provide real-life examples of how color can impact a design's effectiveness. The use of color in Branding, advertising, and product packaging can Influence consumer behavior and perception. Additionally, color can affect mood and emotions, making it a powerful tool in creating a specific atmosphere or conveying a message.
Thinking about colorCloudflare redesigned their color palette to improve Accessibility, align with their visual brand, and provide a consistent experience across products. They started by auditing the many colors used across their websites to identify inconsistencies. They experimented with generating palettes from their brand colors but found manually constructing balanced color scales worked better. They also stress tested palettes by previewing them in Analytics charts and components. The final palette consists of optically balanced scales with each hue aligned to their brand colors. While implementing the new palette, they provided tools to help migrate colors and warn of deprecated values. The work is ongoing as they update websites and aim for more visual cohesion across products.
Green 4 2.0Medium updated their primary green color from #57AD68 to a new two-color family with #02B875 for backgrounds and #00AB6B for text. The original green was desaturated and yellow-tinged, so the new greens are bluer to appear more lively on screens. They switched to two greens to allow each color to work well for different purposes. While the new colors improved some aspects of Accessibility, other aspects decreased slightly. Overall, the new green family provides a more unified and refreshed tone across platforms and devices, though there is still work to do on Accessibility. The process taught Medium a lot about designing color families and algorithms for future efforts.
Re-approaching ColorIn this case study, Kevyn walks through how the Lyft design team developed a common vocabulary around color (including hue and modifier). The team ran into issues with control around concentration in light, middle, and dark shades, so they built their own algorithm to generate colors, which they open-sourced via this article: "ColorBox by Lyft Design".
My struggle with colors, part IIZain discusses building an accessible color system from scratch. An accessible color system should follow WCAG guidelines, use a standardized tone generation method, and be scalable. He starts with a gray tone scale with 11 tones ensuring a contrast ratio of 4.5:1 or higher. Tones are named using a numerical scale from 0 to 100. Five hues are selected: red, yellow, green, blue and purple. The middle tone for each hue is determined to have sufficient contrast ratio. Tints and shades are used to generate tones for each hue. Colorable is used to manually find tones with the required contrast ratio. Guidelines are provided to scale the system by adding more tones or accent colors while maintaining the numeric naming scheme. Zain concludes that experimenting and practicing these techniques will help designers create relevant color systems for their needs.