 Hey, everybody, what's up? It's Rob Dodson. Welcome back to The Out-of-the-Cast Show. Today, we're gonna be talking about color contrast. So in a nutshell, contrast is really the difference between two colors. You know, if you imagine a color wheel and you have two colors that are kind of like far apart on the color wheel or like polar opposites on the color wheel, those colors are gonna have like a lot of contrast because they're really, really different. Whereas if you take two colors that are very close together on a color wheel, it's gonna be harder to tell the two apart. Now the reason why this is important in web design is because oftentimes our whole goal is just to convey some information to the user, usually through like text and images. But if the contrast of our text is a little too subtle and too mixed in with the background, it might be difficult for the user to read the page and that might sort of degrade the user experience. So what I wanted to do today is walk through some of the process I use to just sort of like check the page and figure out if it has appropriate contrast and how to tune it up if I find some issues. But to start, follow me over here in my laptop and I've got a little presentation that I wanna show you that kind of walks through sort of how we measure contrast on the web. So here I've got a set of text boxes on a white background and up above you can see I've got these numbers up here for some contrast ratios, right? So I'm measuring sort of in terms of luminance, the difference between this foreground color and this background color. Now on the web, we actually have guidelines which try to instruct us what our sort of contrast minimums should be. So the web content accessibility guidelines in section 1.4.3, they say that for like body text, you wanna aim for a contrast ratio of around 4.5 to one for like smaller text or sort of your general body copy. For larger text, something that is 14 point bold or 18 point, you can kind of ratchet that contrast ratio down just a little bit to three to one. So if we go back and we look at our image here of contrast, we've got kind of these first two examples would meet that minimum contrast requirement, right? So this one, it's just pure black on white, so it's 15.9 to one, that's really high contrast. And this one, it's a little bit of more of a subtle gray but we still have 5.7 to one, which is pretty nice. These last two though are just a little too low contrast so they wouldn't quite meet that requirement. We can also actually bump this up though. There is a enhanced contrast recommendation in the Web Content Accessibility Guidelines as well. So this is for situations where you might have, you sort of know that you might have either an older audience or a low vision audience. And in that case, we can bump the contrast ratio up to seven to one or 4.5 to one for just a regular body text. So if we go back and we look at this example here, really only this first one would meet that kind of like enhanced contrast ratio requirement. So consider who your audience is going to be when you're building your site or application and then that can help you decide sort of where you wanna aim on the contrast ratio scale. I use a number of different tools to try and figure out if I'm nailing those contrast ratio minimums. And actually my friend Luis has done this really cool thing where he has put together a accessibility testing for the web handbook called Oatmeal, which stands for open accessibility testing methods for experts and lay folk. And he actually has a whole guide in here on how he measures color contrast and the folks on his team do that. And so we're gonna kind of follow this guide a little bit. We're not gonna use all the exact same tools, but this is a really cool methodology that you can check out and use in some of your own apps to maybe figure out your process. So what I've got here is I've got a website called the Accessibility Blog and we're gonna follow two of the steps in that Oatmeal guide doing sort of a semi-automated check using a tool like Axe. And then we'll do a more sort of manual spot check using WCAG Color Contrast Analyzer. So starting on this site, the first thing I'm gonna do is pop up in my DevTools and I've already installed the Axe extension for Chrome. If you actually check out our previous episode on AliCast and I'll leave a link to this down in the show notes, we covered all the different ways that you can install Axe on your system. So I'm just using the extension for Chrome here and I'm just gonna open it up, check out this page and hit the Analyze button and you'll see that it tells me over here on the left that I have a few elements that do not have sufficient color contrast. I've got about seven issues here. It'll try and give me a CSS selector to the elements that need some work, but there's an Inspect button that I often use which I just inspect the element in the DOM and I can kinda scroll up and say, okay, who exactly is this? All right, so we're starting off with these little anchors up here in our navigation and this is one of those areas that I see a lot where it looks like we're actually pretty close to having good contrast here, but we're sort of like on the bubble. It's a little unclear, are we hitting that or not? And so what I'll often do is I'll take this foreground color and I'll take this background color, right? And I can use another tool. This one that I often use is called Lea Verou's Color Contrast Checker, so I will also include a link to this down in the show notes. And then we can just drop in our foreground and that background color. And we can see that the contrast ratio of these two is 3.6, so it's not quite where we want to be for smaller text. Again, we wanna bump that up to about 4.5. So, you know, this is an area where I know I need to go back and since I also have some of these elements right here that are even lighter and since I know that this is pure white text, I can't make it any brighter, my only real option here would be to make this header bar a darker blue so that all three of those links kinda pop a bit more. Another thing that we might notice in our tool if we sort of like step through some of the options is that we also have areas down here like this little subheading which we've got kind of like a subtle gray on white thing going on. And again, we can take that into Lea Verou's Color Checker and we can figure out, you know, are we on the bubble. One option is we can, you know, if we want we can make the text bigger so we can maybe hit 3.0 contrast ratio. That's one option. We can just make the text sort of larger if we're on the bubble or we darken the foreground text because the background is pure white and so we can't really like make the background any lighter. So we can go through and we can work through our CSS and tune those colors up and that's really what a tool like Axis is doing. It's actually looking at the CSS values for background and foreground but there are some situations where a tool like the Axis Inspector is not gonna be able to tell us if we have contrast issues and that's in situations where we don't have clearly defined foreground background colors. So for instance, over here on the right I've also got this advertisement and you know, these are pretty common where you've got some text over an image background and the text itself might even be an image, right? So for a tool like Axis, it can't pick out two distinct foreground background colors. So we're gonna need to use another tool to figure out if we have some contrast issues over here. The tool that I like to use is the WCAG 2.0 Color Contrast Analyzer. It's another Chrome extension and I will warn you it's a little bit buggy but I'm gonna kind of like walk you through how I use it and maybe point out some of the issues so you can work around those. But basically what we do here is after we've installed the extension, we've got this extension up here on the top right, click on that. What I found to be kind of an issue is on retina monitors, if you try and tell it to analyze just a region and you select a region, it'll be sort of off. Like it sort of zooms in and it just can't seem to handle retina that well. So instead, I'll tell it to capture visible content. And what this is gonna do, you can see it's already sort of zoomed in but what this is gonna do is it's gonna try and scan all the pixels on the page and it'll highlight sort of the contrast between that pixel and sort of the ones next to it. So you can pick out those areas where you've got low contrast. While it's scanning, it will take a while, right? So it's only up to like 27% so far. I can walk through some of these settings for you though. So the first one here is asking us what sort of level we're measuring at. So again, I mentioned that we have kind of the minimum contrast ratio of 4.5 to one or you could take it all the way up to like enhanced contrast ratio of seven to one, right? So again, you can choose your target there. Then there's also this pixel radius option. And at first I wasn't quite sure what this was for. By default it's set to one, meaning it's gonna sort of just compare the two pixels right next to each other. But it goes all the way up to three. Oftentimes, when we're working with text on the page, it's not a clearly defined like, the text ends here and the page starts here. Instead, it'll do sort of like an anti-aliasing thing. So if we go and we look at our image of our text, this D here, it's actually kind of three colors, right? So we've got a couple of grays and then the solid white and that's what forms the body of that character. When it's asking us what pixel radius we want to use, it's basically asking us, what sort of like anti-aliasing range do you want to accommodate for? So what I do is I tend to set it to two and that way I can analyze a couple pixels sort of next to each other. All right, cool. So it looks like it just finished. And what it's doing here is it's drawing these white outlines to show us areas of high contrast. In any place where it gets a little noisy, like kind of like right in here, we can tell that we have slightly lower contrast. If we go over and we look at that ad, you can see, okay, yeah, we definitely have some issues here. So up at the top where it says developer friendly, it seems like it's doing okay. And we can kind of toggle this mask on and off. So if we hide it, we can see that when we get to the body text inside of this ad, it actually is even more translucent than the header. And as we get down to the bottom and it mixes with that background, it's really, really tough to see. So this is an area where we know we might have to go back to the designer and say, hey, you know, like I can show you this and I can kind of definitively prove that there is kind of a contrast issue here. And this is a place where we need to maybe tune it up either make the, you know, give the text like a backing so it pops a bit more or figure out if we can use a different background image, something that doesn't interfere with the text as much. So yeah, using these tools and using a guide like Oatmeal, you can go through, you can analyze the contrast for your site or application, maybe look for problem areas, tune it up, make sure your users have a better experience. That about covers it for today. So if you have any questions for me, as always, you can leave them down below in the comments or hit me up on a social network of your choosing. As always, thank you so much for watching and I'll see you next time. If you want to learn more about color contrast, we've got some additional videos that you can check out in our playlist. Again, thanks for watching and I'll see you next time.