How can you craft color palettes that balance accessibility, brand identity, and scale?
Light and dark mode color palettes for my personal website set against an abstract backdrop.
Why another color palette guide?
At first glance, color palette generation might be spretty straightforward. Why not just use a fancy generator like Coolors?
The reality for enterprise design is more complex. While consumer-facing design tools prioritize aesthetic appeal, enterprise applications require color palettes that:
Align with brand guidelinesMeet accessibility standardsSupport white labelingScale for design systems
Most color generators and even designers fall short of these demanding requirements. They’re great for personal projects or quick mockups, but enterprise design requires a more methodical approach.
Objectives
Screenshots of my personal website in light and dark mode.
I’ll walk you through how I created two color palettes for my personal website; one for light mode and one for dark mode. Each set includes:
Canvas colorDefault accent colorSubdued accent colorDefault neutral colorSubdued neutral color
This limited set works for my personal website and excludes semantic, usage, or interaction state colors. I’ll explain each color’s role as we proceed. Let’s dive right in.
There’s almost always a starting color
Contrary to some advice, designers rarely create palettes from scratch. Most often, we build on established brand guidelines. If that’s your situation, you’re in luck.
Color swatch of my personal brand color and its HEX code.
In my case, I used #BA7542, a warm earthy tone that has been integral to my personal brand from the start. Whether your brand has one signature color like Spotify’s green or multiple like McDonald’s red and yellow, this approach works with a single seed color for universal compatibility.
The tool I recommend for finding colors is TPGi’s free Colour Contrast Analyser. However, any color contrast tool with input manipulation will suffice.
Screenshot of TPGi’s free Colour Contrast Analyser for Mac.
Establishing light mode colors
Baseline color
Using the seed color directly isn’t always feasible because it may fail accessibility requirements. Consider these popular brand colors that don’t meet WCAG 2.1’s AA standards for regular text:
Color swatches of popular brands and their respective HEX codes, showing their failure to meet WCAG 2.1’s AA standards for regular text.
To ensure compliance, establish a baseline color by adjusting the seed color’s lightness in a contrast tool until it meets WCAG 2.1’s minimum requirement for regular text against a white background. This baseline color will serve as the foundation for all other colors.
Canvas color
To find this color, use the baseline color as the foreground and white as the background in your contrast tool. Increase the foreground’s lightness until the two colors have a 1.1:1 contrast ratio — just enough to hint at color.
Default and subdued accent colors
Accent colors draw attention to actionable elements like buttons and links. Two levels of contrast — default and subdued — help create visual hierarchy:
Default accent: Reduce the baseline’s lightness until it has a 1.7:1 contrast ratio against the canvas color.Subdued accent: Lower the alpha (opacity) of the default accent until it meets WCAG 2.1’s AA minimum contrast ratio for text against the canvas color.
I have a habit of using opacity as a future-proofing strategy. I briefly get into that in my post Designing Hazel’s Accessible Color System.
Default and subuded neutral colors
Neutral colors serve as the default for most content, much like text printed on paper.
Default neutral: Reduce the default accent’s lightness until it achieves a 1.3:1 contrast ratio against black.Subdued neutral: Lower the alpha of the default neutral until it meets WCAG 2.1’s AA contrast ratio against the canvas color.
Establishing dark mode colors
Baseline color
Dark mode generally requires less saturation to prevent eye strain and improve accessibility. Start by reducing the light mode baseline’s saturation by 33%. Then adjust its lightness until it meets WCAG 2.1’s minimum contrast requirement for regular text against a black background.
Canvas color
For simplicy, reuse the light mode’s default neutral color.
Default and subdued accent colors
In dark mode, invert the light mode formulas:
Default accent: Increase the dark mode baseline’s lightness until it achieves a 1.7:1 contrast ratio against the canvas color.Subdued accent: Reduce the alpha of the default accent until it meets WCAG 2.1’s AA minimum contrast ratio against the canvas color.
Default and subdued neutral colors
Again, invert the light mode formulas:
Default neutral: Increase the default accent’s lightness until it has a 1.3:1 contrast ratio against white.Subdued neutral: Lower the alpha of the default neutral until it meets WCAG 2.1’s AA contrast ratio against the canvas color.
Quick recap
By following this systematic process, you’ll end up with a set of light and dark mode palettes.
Light and dark mode color palettes for my personal website.
Here are the key steps in a single view.
Table outlining a step-by-step process for creating light and dark mode UI color palettes.
For good measure, here are color palettes for the aforementioned brands, using the same process.
Light and dark mode color palettes for Home Depot.Light and dark mode color palettes for Spotify.Light and dark mode color palettes for YouTube.
Beyond the basics
You can extend this approach to meet the demands of complex enterprise applications, where the requirements go beyond basic color palettes. Enterprise needs often involve:
Generating semantic colors: Expanding the palette to include semantic colors, such as those used for success, warning, or error states, ensuring clarity and consistency across the interface.Addressing WCAG standards for text and non-text elements: Meeting accessibility requirements for a wide variety of UI components, including icons, charts, and complex data visualizations, not just text.Incorporating interaction states: Defining colors for hover, focus, active, and disabled states, which are essential for creating intuitive and responsive user interactions.
Parting thoughts
Key takeaway
When it comes to enterprise UI, creating a color palette isn’t about aesthetics alone. It’s about solving UX challenges methodically and for scale, often starting with a seed color from which you can derive all other colors to ensure accessibility and uniformity. You can and should tweak the rules to your liking so long as you apply them consistently.
Automation potential
While the process involves careful manual tinkering with a color contrast tool, there’s exciting potential for automation. Not only can this be useful for generating colors beyond the basics, but the approach has obvious applications for white-label contexts.
Problematic colors
Some seed colors require alternative approaches. For one, there’s the dark yellow problem. Another issue is that a seed color like red or green may conflict with semantic colors, such as error or success indicators.
APCA changes things
These colors were calculated using WCAG 2’s flawed contrast formula, which WCAG 3 aims to improve with the introduction of APCA. This new method will address the contrast formula flaws while also considering font size and weight to ensure sufficient readability. While I’m unsure how this will impact my approach, I’m eager to explore the changes when we cross that bridge.
Closing note
I hope this guide has provided you with a clear framework for creating UI color palettes for enterprise contexts. Whether you’re working on a personal project or tackling a large-scale system, I trust these strategies will serve you well, if only as a source of inspiration for establishing your own strategy.
Thanks for reading, I’d love to hear how you apply these ideas in your own work!
A systematic approach to generating enterprise UI color palettes was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
