7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Test Color Contrasts as You Go

In order to create highly readable and accessible websites, it is very important that the color contrast between your text colors and their backgrounds is sufficient.

In this lesson we’ll look at how you can test contrast as you go, so that when coded up, your design will perform well in accessibility audits.

2.5 Test Color Contrasts as You Go

Hey, welcome back to Code Friendly Web Design with Adobe XD. In the last lesson, we started assembling our color palette. And in this lesson, I'm gonna show you how to make sure that the colors you've selected will contrast sufficiently well to be adequate for accessibility purposes. So what we've done here is a very simple little web page that just got two things. It's got a square to represent the background color, and some text to represent a foreground color. We're in Chrome here. What we're going to do is use Chrome Developer Tools to check on the contrast between these two values. This HTML document is gonna be included with the source files for this course. You can just use this little page any time you need to check on the color contrast. To open up the developer tools, I'm just gonna right click on this text and choose Inspect. So we've got our developer tools here and it's highlighted the foreground text. And then in the right over here in this styles tab, we're gonna be able to check that the foreground text color has a good enough contrast ratio with the background. Do that, but looking for this line here that says color and this little color square here. We click on that, it opens up a color picker, and then down here you can see that it says, our contrast ratio is 7.877. We have two ticks showing up here and that means that our contrast ratio is good enough. If you have one tick showing up here, that's not quite as good, but it's still okay. And we can use this little color picker to transplant in the values from our design that we wanna test and make sure that those contrast ratios are okay. So first we'll put in the background color, so do that. Just click on this line here that says deep class background, so now we're inspecting the square here, and you can see the background color there. So jump back into our design and we'll grab our dark color that we're using here. And then we're gonna test out a light color on top of it to make sure that there's enough of a contrast. So we'll grab this color, open up, copy the color code, go back to our little testing page. Double click the value here so we can edit it, paste in our value from our design, hit Enter. That put our background color in. Now we'll grab our light color for the foreground, copy that HEX code. Go to our foreground do the same thing again, double click to edit it. And now we can check the contrast between these two colors the same way that I just demonstrated. So we'll click this little square, and now sure enough we have at two tics, and that's just fine. To show you what we're trying to avoid, if I start changing these colors to decrease the amount of contrast. As you can see there, now our color contrast has gone down to only having a single tick. And that's more difficult for somebody to read than it was when the color was lighter. And if we keep going, eventually we get a little red mark that tells us, no, that's not a good enough color contrast. So for each of the colors that you check and that you're gonna have layered on top of each other, just throw them into a little test environment like this. Make sure that you've got at least one tick, ideally two, and then you know that your color contrast is just fine. In the next lesson, we're gonna talk a little bit about using a hand off application. So as I mentioned earlier, this course is the first in a two part series with the first one being what we're doing now using XD to put together a design. The second part is gonna show coding that design up using the tool Avocode which is a handoff tool. In the next video, we're gonna talk about why you should consider using a handoff application, and we're gonna take a look at what we've done so far inside a handoff application. Sometimes they can be little minor differences between what you see in the design software and what you see in the handoff software. So we're gonna go over what you can do to work around any little differences that there might be to make sure that your design ends up the way you want it to be in the browser. So we'll check that out in the next lesson, I'll see you there

Back to the top