1
00:00:00,000 --> 00:00:04,637
[MUSIC]

2
00:00:04,637 --> 00:00:07,390
We've added a lot to our
accessibility arsenal.

3
00:00:07,390 --> 00:00:12,840
In addition to the tools available to us
through and HTML itself, there are several

4
00:00:12,840 --> 00:00:18,358
techniques we can use to make navigating
our apps easier on all of our users.

5
00:00:18,358 --> 00:00:22,940
This stage we will cover some ways we
can improve the UI of our websites

6
00:00:22,940 --> 00:00:26,480
with features like high color contrast and
larger clickable areas.

7
00:00:27,770 --> 00:00:32,810
Color contrast is a huge deal with
several types of visual impairment.

8
00:00:32,810 --> 00:00:37,200
This not only includes the color of
text in relation to the background color

9
00:00:37,200 --> 00:00:42,060
beneath it, but can be a factor in
differentiating entire elements on a page.

10
00:00:43,070 --> 00:00:44,190
But just because we're going for

11
00:00:44,190 --> 00:00:48,390
high contrast, it doesn't mean that
everything needs to be in black and white.

12
00:00:48,390 --> 00:00:53,860
There are so many gorgeous combinations
that still comply with WCAG.

13
00:00:53,860 --> 00:00:57,290
Especially if you're not fully
settled on a color palette,

14
00:00:57,290 --> 00:00:59,860
you might want to check out Color Safe.

15
00:00:59,860 --> 00:01:03,840
This tool will help you build accessible
color palettes, by restricting your

16
00:01:03,840 --> 00:01:08,540
choices to only those combinations that
will result in high enough contrast.

17
00:01:08,540 --> 00:01:12,240
Hitting the GET STARTED button
leads us to this color picker,

18
00:01:12,240 --> 00:01:14,710
where we can choose any color we want.

19
00:01:14,710 --> 00:01:16,546
This will be our background color.

20
00:01:19,232 --> 00:01:21,990
Let's say ours is a sort
of off white color and

21
00:01:21,990 --> 00:01:25,428
we want to use a different color for
our headings.

22
00:01:25,428 --> 00:01:29,490
Well, we will look at what we already
have and remain easy to read.

23
00:01:29,490 --> 00:01:32,670
This also allows us to change
the font family, size and

24
00:01:32,670 --> 00:01:37,050
weight so we can approximate the way
the text will look on our page.

25
00:01:37,050 --> 00:01:40,820
We also need to determine which
level of the WCAG Guidelines we need

26
00:01:40,820 --> 00:01:42,240
to be inline with.

27
00:01:42,240 --> 00:01:45,077
Once that's done,
we just need to submit the form and

28
00:01:45,077 --> 00:01:48,691
represent it with all the colors
that will satisfy our parameters.

29
00:01:50,574 --> 00:01:53,874
There are tons of contrast checkers
floating around the web, but

30
00:01:53,874 --> 00:01:57,180
it's nice to have your
options lead out sometimes.

31
00:01:57,180 --> 00:01:59,980
You can safely choose any of
the colors shown in this tool and

32
00:01:59,980 --> 00:02:01,820
know that the color
contrast is good to go.