Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Color contrast is very important for people with any number of visual impairment. This not only includes the color of text in relation to the background color beneath it, but can be a factor in differentiating between entire elements on a page.
Color Safe - Accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
[MUSIC]
0:00
We've added a lot to our
accessibility arsenal.
0:04
In addition to the tools available to us
through and HTML itself, there are several
0:07
techniques we can use to make navigating
our apps easier on all of our users.
0:12
This stage we will cover some ways we
can improve the UI of our websites
0:18
with features like high color contrast and
larger clickable areas.
0:22
Color contrast is a huge deal with
several types of visual impairment.
0:27
This not only includes the color of
text in relation to the background color
0:32
beneath it, but can be a factor in
differentiating entire elements on a page.
0:37
But just because we're going for
0:43
high contrast, it doesn't mean that
everything needs to be in black and white.
0:44
There are so many gorgeous combinations
that still comply with WCAG.
0:48
Especially if you're not fully
settled on a color palette,
0:53
you might want to check out Color Safe.
0:57
This tool will help you build accessible
color palettes, by restricting your
0:59
choices to only those combinations that
will result in high enough contrast.
1:03
Hitting the GET STARTED button
leads us to this color picker,
1:08
where we can choose any color we want.
1:12
This will be our background color.
1:14
Let's say ours is a sort
of off white color and
1:19
we want to use a different color for
our headings.
1:21
Well, we will look at what we already
have and remain easy to read.
1:25
This also allows us to change
the font family, size and
1:29
weight so we can approximate the way
the text will look on our page.
1:32
We also need to determine which
level of the WCAG Guidelines we need
1:37
to be inline with.
1:40
Once that's done,
we just need to submit the form and
1:42
represent it with all the colors
that will satisfy our parameters.
1:45
There are tons of contrast checkers
floating around the web, but
1:50
it's nice to have your
options lead out sometimes.
1:53
You can safely choose any of
the colors shown in this tool and
1:57
know that the color
contrast is good to go.
1:59
You need to sign up for Treehouse in order to download course files.
Sign up