In this video we will look at colour contrast and show you how
you can check the contrast of your background and foreground.
And I'm quite excited about this video
because I've discovered something new which I'm going to share with you.
I've been using the WebAIM contrast checker for many years
and a member of my team,
Martyn, showed me something recently that I didn't even know existed,
and it makes it so much easier.
So on the left of my screen,
I have my PowerPoint slide and I've got two text boxes.
I've got one with large text.
Large text is font size 14 and above,
if it's bold. If it's not bold, then font size 18 and above.
Normal text is font size 17 and below,
unless it's bold, in which case it would be font size 13 and below.
So first of all, let's have a look at the background and foreground colours.
In the contrast checker, you have to choose the colour code
for your foreground and background colours.
You can also use the sliders and the sliders always go from black to white.
My text is white, so I'm going to slide that all the way to the right.
And now for the bit that I've just discovered,
if you click on the background colour or foreground
colour on the coloured bar,
you can select an eyedropper.
You can then position that anywhere on your page and pick up the colour.
This box actually has a slight gradient on it,
so it goes from slightly darker blue to slightly lighter.
If we're dealing with white text, we need to measure the white
against the lightest colour of blue.
So I'm going to pick that up from the top right hand corner of the text box.
And in the sample colour you can see that it's now gone blue to match.
So I now
have white foreground colour and that blue background colour
and I'm going to scroll down and I can see that for both normal
text and large text that colour fails.
So what do we do about this?
Let's have a look at the large text first.
One option that I have is I could actually just make the text black.
I may decide to do that for my normal text.
Another alternative is I could slide the slider for the background colour
towards the darker end so that the contrast
between the white text and the background becomes greater
until this WCAG double AA for large text passes.
So I'm going to do that first.
Now that it has passed,
I could pick up this colour code.
I'm going to copy that
and I could change the
I'm going to make this now a little bit bigger so that it's easier to work with.
I could go into the shape format and change the shape
fill, click on the custom
tab and
put in that colour.
And now that that background blue is just slightly darker
and it is now a pass.
Alternatively, I could have left it where it was
and I could have moved the foreground
colour slider all the way to the left to make it black.
Now for normal text that passes.
So that's going to be my solution for this one.
So I'm going to highlight my text, go to the Home menu
and I'm going to change the text colour to black.
And now that passes.