3.3 Color Contrast
Accessibility is always important to consider when designing typography for the web (designing anything for the web, in fact), and ensuring proper color contrast is one of the most straightforward ways you can make your designs readable for everyone. In this video we’ll see how you can check on your color contrast and make sure it’s up to par.
1.Introduction1 lesson, 00:37
2.Responsive Adjustments2 lessons, 32:50
3.Color & Accessibility4 lessons, 45:32
4.Element-Specific Typography4 lessons, 44:49
5.Wrapping Up1 lesson, 03:33
3.3 Color Contrast
Hey, welcome back to advanced typography in Figma. In this lesson, we're carrying on with a look at color in your typography. And we're moving into the relevance of color to accessibility. The first place that we're gonna look is how color contrast should be evaluated as part of your design process. And there's actually a really helpful plugin that's free that you can use with Figma that basically automates the entire process of checking on color contrast. So head up to your Menu > Plugins > Manage Plugins. From here, hit browse, and then just search for color contrast. And you'll see here Color Contrast Checker. So that's the one you want to go ahead and install. And then the way that this plugin works is you select any frame in your design. So let's start by selecting this frame here with that paragraph. You go up to the Menu > Plugins > Color Contrast Checker and now, you just press the Check button. And what it's gonna do is look at the color of the text and the color of the background here and compare them and tell you whether or not they contrast well enough. So we just hit Check and that tells us that it meets the triple A color contrast requirements. And there's two grades, well three grades, rather, that your color contrast can have. There's two passing grades, double A and triple A. And then anything lower than that is, basically, a fail. That means that your color contrast is going to cause reading issues for somebody. So I'll give you an example. If I select this text and then I make it lighter, let's move this out of the way. Actually just close that. If I make it lighter, I'll just make it ridiculously light to get the point across. And then I run the checker again. I'll press Check now. Now you can see that it's alerted us to the fact that the color contrast is no good. This is too difficult to read. These colors are too close together. To have enough contrast means that your colors have to be far enough apart in lightness. You need to have one that's quite light, and one that's quite dark. Now what you can do to correct your colors, is you can move either one of these sliders. So this slider controls the color of the text, so I can drag it down to make it darker. And you can see this number here, is showing you the contrast ratio. And what you wanna do is change the contrast ratio until both of these values here, these gradings, double A, and triple A, turn into a tick instead of a cross. So I can keep dragging this down. So there's our first passing grade, double A. But that is still gonna cause some reading difficulties for some people, just fewer people. Or I can keep dragging it even further. Now, we have both of them at a passing grade. So I can, if I want, I can just try to fine tune this so I get it just over the mark. And then if I hit Done, that's gonna allow me to keep those colors. So those sliders are really useful if you know that you already have a selection of colors that you really like and you don't wanna change them too dramatically. Just wanna tweak them a little bit so that you can get to that passing grade for your color contrast. So we already had good colors there, so I'm just going to undo to get those good colors back. So that's what you can do, you can go through and select each one of the frames in your design. I can select this one here, and then just repeat the process. So Color Contrast Checker, Check, triple A amazing, so that one's all good. And then I just wanna show you one of the gotchas that you can get when you're using this plugin. Sometimes the plugin might not be able to tell exactly which backgrounds are related to which foregrounds. So if I select this whole frame, it's going to give me a warning, because it's going to detect this yellow headline color here. And it's gonna think that it's being used on top of a white background. So I'll show you that Plugins > Color Contrast Checker, Check. So it's said that everything else here is fine. And it hasn't flagged any of our other colors, but it has identified this yellow color. So if you do see an error like this and you're not sure which element it applies to, then either you can just check visually. You see a yellow color there so you know this is your only yellow color on the page. You've already checked that frame individually, so you know that it's fine. Or you can just start moving one of the sliders and seeing which one of the elements is modified when you change that slider. Then you can hit reset to put it back how it was or, obviously, you can just hit undo. It's for this reason that it's a good idea to group things up into individual frames. So for example, if I want to check and make sure that the color contrast of this area is okay, I'll grab the frame tool and I'll just draw a frame around all of these. And it's going to automatically nest all of these items inside this frame. So you can see that this frame is frame three in the layers area here. And then all of these elements have been nested inside. So now I can check those elements individually. And verified that they have a passing grade on their contrast as well. And I have already gone through and checked all of these colors to make sure that their contrast is adequate. That was part of my color selection process. So probably what will actually happen in practice is you'll create a selection of colors here that'll look good here. But then once you go through, apply them to your text and run the color contrast checker on them. You'll probably find that you need to tweak a couple of them just a little bit before you fully settle on using them. So that is how you check color contrast in Figma. And that's one of two main color considerations that you always need to bear in mind when you are ensuring your topography is designed for accessibility. The other is color blindness. Now you might think that checking for color blindness could be a difficult process. But once again, thanks to a plugin that's freely available for use in Figma, it's actually very straightforward and quick process to double check and make sure that your typography and your colors are readable for people who have color blindness. And we're gonna see how in the next lesson. I'll see you there.