Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Before and After: Color!
You have completed Before and After: Color!
Preview
Follow along with one solution for improving color in this practice project.
Resources:
- WCAG 2.0 contrast ratios
- WebAIM contrast checker
- The contrast.io app that Hope uses - It is now also available as a Figma plugin.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
How's your messaging app coming along,
were you able to rework the color?
0:00
Let me show you what I did,
0:05
the first thing I notice was
the brightly colored sidebar.
0:07
The fully saturated orange is drawing
attention to the sidebar, making it
0:11
difficult to focus on the messaging
area which is the key area of this app.
0:16
I wasn't initially sure
which color to change it to
0:21
since I noticed the color
palette needs improvement.
0:24
The color palette mainly
consists of this bright orange,
0:27
a pastel orange,
a bright blue and a light gray.
0:32
The bold orange and
blue are complimentary colors,
0:37
although it's not working
to this design's advantage.
0:40
My eyes are bouncing back and
forth between the sidebar and
0:44
the message button.
0:47
I liked how the blue compliments
the abstract background and
0:50
the music card, so
I pulled inspiration from there.
0:54
I imagine this background could change yet
0:58
stay within this palette of blues,
pinks and purples.
1:01
While I like the colors
in this music card,
1:05
the text is difficult to read
since the contrast is low.
1:08
You can check the accessibility of
text color by using free tools online.
1:12
Although I like the contrast.io app
because it sits in my status bar for
1:17
easy color picking while I'm designing.
1:21
Choose the text color and
the background color.
1:24
It'll give a numeric score
which aligns with a rating,
1:28
which align with accessibility
guidelines outline and the WCAG 2.0.
1:32
I'll try to pick a lighter color to
determine the worst case scenario in
1:37
terms of contrast.
1:42
Here we see it scored AA+,
which is the smallest
1:43
acceptable score for
type sizes 18 points or larger.
1:48
For this text size,
a score of AA is preferable,
1:53
since the text size is below 18 points.
1:57
AAA would be even better, but
it's not completely necessary.
2:00
To darken it, I added a dark pink
rectangle on top and set it to multiply.
2:05
100% opacity made it a bit too bold,
so I knocked it down to 80%.
2:12
By the way, in Figma you can
create color styles by clicking
2:19
the quadruple dot icon
next to the fill header.
2:23
This makes it easy to stick to the color
palette and prevents you from ending up
2:27
with ten different blues when you only
intended to use three different blues.
2:32
Also it makes easy to update a color in
one spot instead of every single instance.
2:38
When naming styles, avoid adding color
descriptors like the word purple,
2:45
instead describe their purpose.
2:51
This makes it easier if you decide
to change the color in the future.
2:53
Now, let's get back to the sidebar,
2:57
if we check the contrast it
fails at a score of 2.55.
3:00
So, I pick the dark purple from
the music card to help the white text
3:07
stand out more.
3:12
Now the purple side bar is rated AA, next,
3:13
notice the tension between the warm
pastel orange and the light cool grey.
3:17
The two colors clash as they're similar
in brightness, yet different temperature.
3:24
I simplified this by sticking
with an overall cool palette.
3:30
I changed the pastel orange background
to white that opens up the space and
3:35
gives the content more breathing room.
3:39
Great, so
now I have a nice palette shaping up.
3:43
Another aspect we can approve is the use
of color to communicate actions and
3:46
states.
3:52
The use of color is inconsistent, some
links are blue while others are orange.
3:53
There isn't a clear mental model for
these interactions to be different colors.
4:02
I decided to switch all the text
actions to a bright blue,
4:07
I see these as secondary actions.
4:12
Then as for the primary action is the
message button and the open profile panel.
4:15
It's already standing out as a big button,
but
4:20
to further differentiate it from
the blue secondary actions,
4:24
I used a bright purple to tie it in
with the music card inspiration.
4:28
As far as selected states, the cooking
topic is selected and that's important
4:34
enough, I wanted it to stand out by
accentuating it with the purple color.
4:39
In the message composition box,
I switch the action buttons to a purple,
4:43
as well as the rectangle
highlighting the selected text.
4:48
I lightened the opacity of
the selected text rectangle to retain
4:52
the text contrast.
4:57
Now it's looking quite good, but
I can think of a few more tweaks.
4:59
The color of the green status dot and
the red heart is quite bearish.
5:04
Your first instinct maybe to grab
a default red or green color,
5:09
but most of the time the best
looking colors are a bit muted.
5:14
I chose some more muted tones of red and
green that don't stand out as much,
5:18
we don't want to over
emphasize a minor detail.
5:23
Now at this point, I was still inspired
by the music card background, and
5:29
I wanted to inject some
character into the side bar.
5:34
I added color rings which
use gradients to create
5:37
an abstract design in the background.
5:41
For a finishing touch, I wanted to
make the background more presentable.
5:43
This isn't necessary for
every markup, this is just for
5:48
polishing a design for
a presentation or for your portfolio.
5:52
I added a linear gradient background
which compliments the design.
5:56
Staying within the palette I
created a gradient that transitions
6:01
from blue to purple.
6:06
By making the colors similar saturations
and relatively close to each other on
6:07
the color wheel,
the gradient is pleasing to the eye.
6:12
To add up, I added a drop shadow
to the app, instead of applying it
6:16
to the up rectangle,
I created a smaller rectangle behind it.
6:21
This creates a deeper more
subtle shadow as if the app
6:27
extends further into 3D space.
6:31
If my design looks really
different from yours, that's okay.
6:34
There's so many different ways you could
apply color to this user interface,
6:39
and the important thing is
to just keep practicing.
6:44
I hope you can go forth creating
a harmonious palette and
6:47
an intentional use of
color in your next design.
6:50
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up