WEBVTT

1
00:00:06.480 --> 00:00:09.905
In this video we will
look at colour contrast and show you how

2
00:00:09.905 --> 00:00:13.403
you can check the contrast
of your background and foreground.

3
00:00:14.913 --> 00:00:16.607
And I'm quite excited about this video

4
00:00:16.607 --> 00:00:20.694
because I've discovered something new
which I'm going to share with you.

5
00:00:21.099 --> 00:00:24.413
I've been using the WebAIM
contrast checker for many years

6
00:00:24.782 --> 00:00:26.365
and a member of my team,

7
00:00:26.365 --> 00:00:30.305
Martyn, showed me something recently
that I didn't even know existed,

8
00:00:30.489 --> 00:00:32.257
and it makes it so much easier.

9
00:00:33.214 --> 00:00:35.166
So on the left of my screen,

10
00:00:35.166 --> 00:00:38.738
I have my PowerPoint slide
and I've got two text boxes.

11
00:00:39.253 --> 00:00:41.426
I've got one with large text.

12
00:00:41.757 --> 00:00:44.924
Large text is font size 14 and above,

13
00:00:44.924 --> 00:00:49.416
if it's bold. If it's not bold, then
font size 18 and above.

14
00:00:50.926 --> 00:00:53.909
Normal text is font size 17 and below,

15
00:00:53.909 --> 00:00:57.186
unless it's bold, in which case
it would be font size 13 and below.

16
00:00:57.738 --> 00:01:01.053
So first of all, let's have a look
at the background and foreground colours.

17
00:01:02.084 --> 00:01:05.729
In the contrast checker,
you have to choose the colour code

18
00:01:05.876 --> 00:01:08.123
for your foreground
and background colours.

19
00:01:08.822 --> 00:01:13.425
You can also use the sliders and
the sliders always go from black to white.

20
00:01:14.088 --> 00:01:18.102
My text is white, so I'm going to slide
that all the way to the right.

21
00:01:19.243 --> 00:01:21.931
And now for the bit
that I've just discovered,

22
00:01:22.926 --> 00:01:25.982
if you click on the background colour
or foreground

23
00:01:25.982 --> 00:01:28.081
colour on the coloured bar,

24
00:01:29.812 --> 00:01:31.947
you can select an eyedropper.

25
00:01:33.752 --> 00:01:37.139
You can then position that anywhere
on your page and pick up the colour.

26
00:01:37.839 --> 00:01:40.380
This box actually has a slight
gradient on it,

27
00:01:40.380 --> 00:01:43.436
so it goes from slightly darker
blue to slightly lighter.

28
00:01:44.136 --> 00:01:47.450
If we're dealing with white text,
we need to measure the white

29
00:01:47.450 --> 00:01:49.217
against the lightest colour of blue.

30
00:01:49.217 --> 00:01:54.041
So I'm going to pick that up from the top
right hand corner of the text box.

31
00:01:54.041 --> 00:01:59.307
And in the sample colour you can see that
it's now gone blue to match.

32
00:02:00.449 --> 00:02:00.927
So I now

33
00:02:00.927 --> 00:02:04.462
have white foreground colour
and that blue background colour

34
00:02:04.904 --> 00:02:09.544
and I'm going to scroll down
and I can see that for both normal

35
00:02:09.544 --> 00:02:13.153
text and large text that colour fails.

36
00:02:14.368 --> 00:02:16.577
So what do we do about this?

37
00:02:16.577 --> 00:02:18.934
Let's have a look at the large text first.

38
00:02:20.149 --> 00:02:23.794
One option that I have is
I could actually just make the text black.

39
00:02:24.052 --> 00:02:26.814
I may decide to do that
for my normal text.

40
00:02:28.250 --> 00:02:32.522
Another alternative is I could slide
the slider for the background colour

41
00:02:33.184 --> 00:02:36.535
towards the darker end
so that the contrast

42
00:02:36.535 --> 00:02:39.813
between the white text
and the background becomes greater

43
00:02:40.181 --> 00:02:45.299
until this WCAG double
AA for large text passes.

44
00:02:45.704 --> 00:02:48.650
So I'm going to do that first.

45
00:02:48.650 --> 00:02:50.528
Now that it has passed,

46
00:02:50.528 --> 00:02:53.106
I could pick up this colour code.

47
00:02:53.106 --> 00:02:54.505
I'm going to copy that

48
00:02:55.463 --> 00:02:57.561
and I could change the

49
00:02:58.151 --> 00:03:00.986
I'm going to make this now a little bit
bigger so that it's easier to work with.

50
00:03:00.986 --> 00:03:04.006
I could go into the shape
format and change the shape

51
00:03:04.006 --> 00:03:08.645
fill, click on the custom

52
00:03:08.793 --> 00:03:11.517
tab and

53
00:03:11.738 --> 00:03:15.863
put in that colour.

54
00:03:15.863 --> 00:03:20.613
And now that that background blue
is just slightly darker

55
00:03:21.165 --> 00:03:24.590
and it is now a pass.

56
00:03:24.590 --> 00:03:27.793
Alternatively, I could have left it where it was

57
00:03:29.487 --> 00:03:31.918
and I could have moved the foreground

58
00:03:31.918 --> 00:03:35.305
colour slider
all the way to the left to make it black.

59
00:03:35.637 --> 00:03:38.288
Now for normal text that passes.

60
00:03:38.546 --> 00:03:41.013
So that's going to be my solution
for this one.

61
00:03:41.013 --> 00:03:44.511
So I'm going to highlight my text,
go to the Home menu

62
00:03:45.211 --> 00:03:48.599
and I'm going to change the text colour
to black.

63
00:03:49.593 --> 00:03:50.955
And now that passes.