Speaker A
The hardest part of UI isn't layout or typography, it's color.
Learn the 7 common color mistakes in UI design and how to fix them for better accessibility, hierarchy, and brand adaptation.
Key Takeaways
- Effective color use enhances UI clarity, hierarchy, and accessibility.
- Following established color rules like 60-30-10 helps maintain visual balance.
- Brand colors should be adapted thoughtfully to meet design and accessibility needs.
- Dark mode requires its own tailored color palette for optimal user experience.
- Color is a powerful tool for communicating status and element states in UI.
Summary
- Color choice is the hardest part of UI design, impacting clarity and accessibility.
- Avoid using too many competing accent colors; follow the 60-30-10 color rule for balance.
- Icons generally do not need color unless to indicate status or active states.
- Backgrounds should be neutral and unobtrusive, often using grays or tinted neutrals.
- Adapt brand colors by rotating hues or using complementary colors to improve usability and WCAG compliance.
- Use grays instead of pure black or white for text and UI elements to create better hierarchy and reduce eye strain.
- Dark mode requires a custom palette rather than simply inverting light mode colors.
- Use red for destructive actions and notifications, even if not part of the brand palette, for usability.
- Element states like hover, active, and disabled should be communicated with subtle color changes.
- Simplify color palettes to reduce clutter and improve user focus and clarity.
Full Transcript — Download SRT & Markdown
Speaker A
Fit the wrong palette and your design can look cheap and confusing.
Speaker A
But by the end of this video, you'll be able to pick out a quality color palette and identify the most common color mistakes made.
Speaker A
By redesigning a file management app from revolting to refined.
Speaker A
Less is almost always more with color.
Speaker A
Not everything should be a different color like it is here.
Speaker A
First, these cards are burning a hole in my eye and they almost all fail the WCAG contrast checks, meaning we can't reasonably use them.
Speaker A
I'm sure you've heard of the 60 30 10 rule, meaning the UI is 60% of our dominant neutral color, 30% secondary color and 10% accent color.
Speaker A
Lemon Squeezy is a good and very colorful example of this, with purple being 60%, yellow being the 30% and white actually being the accent color in this section.
Speaker A
Right now, we have at least five different accent colors on these cards, all competing for attention.
Speaker A
If we swap the cards for our brand color, we somewhat hit the 60 30 10 rule.
Speaker A
But now we have a different problem: the bright purple dominates the page for an element that really isn't that important and creates obvious accessibility issues.
Speaker A
A good fix is to lighten it up so it draws less attention and swap the text to black.
Speaker A
Next, let's focus on these icons down here.
Speaker A
For the most part, icons need no color.
Speaker A
Their job is to be recognizable symbols.
Speaker A
Color should be reserved for communicating status, like highlighting this as an active tab.
Speaker A
Finally, let's clean up some of the rest of the colors that are used just for the sake of using color.
Speaker A
By reducing our palette, we've already created more clarity for the user.
Speaker A
You know how we use white space to create hierarchy and let the elements breathe?
Speaker A
Well, it's the same idea with color and it's called neutral balance.
Speaker A
Backgrounds are the best place to start because they should remain in the background.
Speaker A
And our sandy yellow gradient is not really doing that.
Speaker A
Almost never will you want bright colors for your background.
Speaker A
There are, of course, notable exceptions to every rule.
Speaker A
But generally, you want to start with a neutral gray background and a very light or white foreground.
Speaker A
This is the same idea for dark mode, where the darker colors are in the background and slightly lighter colors make the foreground.
Speaker A
But we can integrate a little more color into this by taking our neutral gray and adding a hint of purple to it.
Speaker A
Headspace does this very thing where they take a tint of their bright orange and use it in the background on these cards to add a splash of color without overpowering the visuals.
Speaker A
In light mode, you can also get away with reversing the background and foreground, and often this can make sense if you have smaller UI features like Dribbble search bar for better accessibility.
Speaker A
Finally, maintaining neutral balance sometimes means removing the backgrounds altogether.
Speaker A
In the case of our cards, we could adjust the colors so we add another layer to our UI.
Speaker A
But that's a lot of clutter.
Speaker A
Instead, sometimes a simple border is the best solution.
Speaker A
A common challenge designers face is working with the brand colors that are provided.
Speaker A
For example, with our brand colors, let's assume the brand guidelines look a little bit like this.
Speaker A
The problem is we don't really have much else to work with.
Speaker A
So in this storage bar, we could change the opacity.
Speaker A
But it feels a little bland.
Speaker A
To spice it up, we can rotate our purple slightly on the color wheel to pick a blue and pinkish color.
Speaker A
We can also choose a complementary color across the color wheel, like a bright yellow.
Speaker A
These colors all work well on our UI because they're analogous and complementary colors.
Speaker A
This strategy also works if you have a brand color like this orange that fails WCAG checks with white text.
Speaker A
You can darken it up, which passes, or choose a complementary blue, which also passes.
Speaker A
A ton of brands actually follow this very idea.
Speaker A
Take Mailchimp, for example, they have bright yellow as their primary color, which is then used with a complementary turquoise secondary.
Speaker A
Or Airbnb, who has a very bright pink and a much deeper pink to pair with it.
Speaker A
The point is, don't be afraid to adapt brand colors in order to accommodate good design.
Speaker A
And speaking of adapting, I want to thank today's sponsor, Final Round AI, which helps designers find jobs faster.
Speaker A
Job hunting used to look like this for me: 50 tabs open, copy-pasting shit all over the place.
Speaker A
But now, I just use this.
Speaker A
It automatically finds relevant jobs to match your skills and lets you apply with a single click.
Speaker A
You'll be able to see your applications here.
Speaker A
And if you get an interview, it'll show up here.
Speaker A
I just put in my resume, role, years of experience, location.
Speaker A
And within a couple seconds, it had already found a high-quality job for me to apply to.
Speaker A
If you want to check it out, it'll be the first link in the description down below.
Speaker A
Using pure white and pure black is not bad.
Speaker A
They're colors, so why not use them?
Speaker A
But often, there are just better options than black or white.
Speaker A
And a lot of it boils down to hierarchy.
Speaker A
For example, below the name of the file, we have the size and type of file.
Speaker A
This isn't super important information, so we can use a dark gray instead.
Speaker A
Same idea for the labels over here.
Speaker A
Or for the borders we just added.
Speaker A
Because the elements are well grouped, we can lighten it up too.
Speaker A
In fact, most of the text is light gray or dark purple.
Speaker A
Not even black.
Speaker A
This is a similar idea for dark modes, but because of the distinct focus on eye strain, we can be even more aggressive with lowering the brightness of our grays.
Speaker A
Reserving white only for the most important actions.
Speaker A
Getting comfortable with using more gray and less black and white is really what differentiates mediocre designers from professional ones.
Speaker A
Now, speaking of, dark mode is not just the inverse of light mode.
Speaker A
If we were to inverse all the colors on our light mode, this is what we'd end up with.
Speaker A
Not awful, but certainly not ideal.
Speaker A
First, let's brighten up these borders and the main card, since dark colors need to be more different than light colors to see the difference.
Speaker A
Our text is all light purple because we're using a very dark purple instead of black on our light mode.
Speaker A
Typically, light grays work best on dark mode to make it easier on the eyes than white.
Speaker A
But from there, we'll brighten up some of the most important text, like the logo and storage used, to pure white.
Speaker A
Finally, these colors are probably fine, but our logo should be desaturated a touch.
Speaker A
So, no, you shouldn't just inverse your colors from light to dark.
Speaker A
Instead, a palette should be built with the goals of dark mode in mind.
Speaker A
Now, these might be our brand colors, but when the user clicks on extra details.
Speaker A
We can either have the delete button have a purple background or a red background.
Speaker A
The purple background is undeniably more on brand.
Speaker A
However, that draws attention to the button and doesn't illustrate its destructive nature.
Speaker A
Instead, we use red, and this is why red and green are often in a brand's color palette, even if they aren't a brand color.
Speaker A
Because a pop-up like this just simply wouldn't fly from a usability point of view.
Speaker A
Red is also often used for notifications, but this is much more flexible than destructive actions.
Speaker A
And could be swapped with purple in this case.
Speaker A
Element states are very important.
Speaker A
And we can do a lot with just color.
Speaker A
For example, this button is obviously disabled without any other visual cues.
Speaker A
Just from the light gray and white text.
Speaker A
And this is also pretty bulletproof for a dark mode too.
Speaker A
Hovers and clicks are the most common element states.
Speaker A
For hover state, use a slightly lighter or brighter version of the base color.
Speaker A
For an active or pressed state, use a slightly darker version.
Speaker A
And then for a disabled state, just desaturate the color, assuming it's not already grayscale.
Speaker A
But because we don't have hover effects on mobile, we usually just resort to click effects.
Speaker A
For example, we don't need anything here.
Speaker A
However, adding a slightly darker gray on press makes it feel like you're actually pressing into something.
Speaker A
With all those changes, we've taken our awful UI and transformed it in both light mode and dark mode.
Speaker A
Color doesn't need to be complex in order to create a user-friendly and effective design.
Speaker A
If you want to check out Final Round AI, it'll be the first link in the description.
Speaker A
And the Figma files for this design will also be down there too.
Speaker A
Thanks for watching, and I'll see you in the next one.
Topics:UI designcolor mistakescolor paletteaccessibilityWCAGdark modebrand colorscolor hierarchyelement statesdesign tips
![The Wounded Spirit – Timothy Keller [Sermon] — Transcript](https://i.ytimg.com/vi/pkL3R27ZV1o/maxresdefault.jpg)
