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.