How to check for accessible colors -- A11ycasts #17

00:08 - Today we’re going to be talking about color contrast.

00:11 - So, in a nutshell, contrast is really the difference between two colors.

00:15 - You know, if you imagine a color wheel, and you have two colors that are far apart on the color wheel, or polar opposites on the color wheel, those colors are going to have a lot of contrast because they’re really really different.

00:26 - Whereas, if you take two colors that are very close together on the color wheel, it’s going to be harder to tell the two apart.

00:31 - Now, the reason why this is important in web design is because often times our whole goal is convey some information to the user, usually through text and images.

00:41 - But, if the contrast of our text is a little too subltle 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.

00:51 - So what I wanted to do today is walk through some of the process that I use to sort of check the page and figure out if it has appropriate contrast and how to tune it up if I find some issues.

01:01 - But to start, follow me over to my laptop and I have a little presentation that I want to show you.

01:06 - It kind of walks through how we measure contrast on the web.

01:08 - 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.

01:18 - So I’m measuring, in terms of luminance, the difference between this foreground color and this background color.

01:25 - Now, on the web we actually have guidelines that try to instruct us what our contrast minimums should be.

01:33 - So the web content accessibility guidelines in section 1. 4. 3 they say for body text you want to aim for a contrast ratio of around 4. 5:1 for like smaller text or your general body copy.

01:46 - For larger text, something that is 14 point bold or 18 point, you can ratchet that contrast ratio down just a little bit to 3:1.

01:56 - So if we go back and we look at our image of contrast, we’ve got these first two examples would meet that minimum contrast requirement. So this one is just pure black on white so its 15. 9:1.

02:09 - Thats really high contrast. This one is a little more of a subtle grey but we still have 5. 7:1, which is pretty nice.

02:15 - These last two though are just a little too low contrast, so they wouldn’t quite meet that requirement.

02:21 - We can also actually bump this up though, theres a enhanced contrast recommendation in the web content accessibility guidelines as well.

02:29 - So this is for situations where you know you might have either an older audience or a low vision audience.

02:37 - In that case we can bump the contrast ratio up to 7:1 or 4. 5:1 for the regular body text.

02:43 - So if we go back and we look at this example here really only this first one would meet that enhanced contrast ratio requirement.

02:51 - So, consider who your audience is going to be when you’re building your site or application and that can help decide where you want to aim on the contrast ratio scale.

03:01 - I use a number of different tools to try to figure out if I’m nailing those contrast ratio minimums.

03:07 - And actually my friend Louis has done this really cool thing where he has put together this accessibility testing for the web handbook called OATMEAL which stands for Open Accessibility Testing Methods for Experts and Lay folk.

03:19 - He actually has a whole guide in here about how he measures color contrast and the folks on his team do that.

03:25 - And so we’re going to kind of follow this guide a little bit.

03:27 - We’re not going to 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.

03:35 - So what I’ve got here is a website called the accessibility blog, and we’re going to follow two of the steps in that OATMEAL guide doing a sort of semi-automated check using a tool like aXe.

03:47 - And then we’ll do a more manual spot check using a WCAG color contrast analyzer.

03:53 - So, starting on this site, the first thing I’m going to do is pop open my DevTools.

03:56 - I’ve already installed the aXe extension for Chrome.

04:00 - If you actually check out our previous episode on A11ycasts, 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.

04:08 - So I’m just using the extension for Chrome here, and I’m just going to open it up and check out this page and hit the analyze button.

04:14 - 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 7 issues here.

04:21 - It’ll try to give me a CSS selector to the elements that need some work, but there’s an inspect button that I often use to just inspect the element in the Dom, and I can scroll up and say who exactly is this.

04:34 - Alright, so we’re starting of with these little anchors up here in our navigation and this is one 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 on the bubble, it’s a little unclear are we hitting that or not.

04:52 - So what I’ll often do is I’ll take this foreground color and I’ll take this background color and I can use another tool, this one that I often use is called Lea Verou’s Color Contrast Checker, so I’ll also include a link to this down in the show notes.

05:09 - 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 its not quite where we want to be for smaller text.

05:24 - Again, we want to bump that up to about 4. 5.

05:27 - So, this is an area where I know that 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 and 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 pop a bit more.

05:46 - Another thing that we might notice in our tool if we step through some of the options is that we also have areas down here like this little sub-heading which we’ve got a kind of subtle grey 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.

06:03 - One option, if we want we can make the text bigger, so we can maybe hit 3. 0 contrast ratio.

06:10 - That’s one option, we just make the text sort of larger if we’re on the bubble.

06:14 - Or, we darken the foreground text because the background is pure white so we can’t really make the background any lighter.

06:19 - 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 aXe is doing.

06:26 - It’s actually looking at the CSS values for background and foreground.

06:30 - But there are some situations where a tool like the aXe inspector is not going to 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.

06:41 - So, for instance, over here on the right I’ve also got this advertisement and these are pretty common where you have some text over an image background and the text itself might even be an image right? So, for a tool like aXe, it can’t pick out two distinct foreground background colors so we’re going to need to use another tool to figure out if we have contrast issues over here.

07:03 - So the tool that I like to use is the WCAG 2. 0 Color Contrast Analyzer.

07:07 - It’s another Chrome extension, and I’m going to warn you it’s a little bit buggy, but I’m going to walk you through how I use it and maybe point out some of the issues so you can work around those.

07:17 - But basically what we do here is after we’ve installed the extension, we’ve got this extension up here in the top right, click on that.

07:24 - What I found to be sort of an issue here is, on retina monitors, if you try to tell it to analyze a region and you select a region, it’ll be sort of off.

07:31 - Like, it sort of zooms in and it doesn’t seem to be able to handle retina that well.

07:35 - So, instead, I’ll tell it to capture visible content.

07:38 - And what this is going to do, you can see that it’s already sort of zoomed in, what this is going to do is it’s going to try to scan all the pixels on the page and it’ll highlight the contrast between that pixel and the ones next to it.

07:49 - So you can pick out those areas that have low contrast.

07:52 - While it’s scanning, so it will take a while right, it’s only up to 27% so far, so I can walk through some of these settings for you though.

07:58 - So, the first one here is asking us what level we’re measuring at.

08:02 - So, again, I mentioned that we have the minimum contrast ratio of 4. 5:1 or we can take it all the way up to the enhanced contrast ratio of 7:1 right? So, again, you can choose your target there.

08:13 - 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 so it’s going to compare the two pixels next to each other, but it goes all the way up to 3.

08:26 - Often times, when we’re working with text on the page, it’s not a clearly defined the text ends here and the page starts here.

08:32 - Instead, it’ll do a sort of anti-aliasing thing.

08:35 - So if we go and we look at the image of our text, this D here it’s actually sort of three colors.

08:41 - So we’ve got a couple greys and then the solid white, and that’s what forms the body of that character.

08:46 - When it’s asking us what pixel radius that we want to use, it’s basically asking us what sort of anti-aliasing range do you want to accommodate for.

08:54 - So, what I do is I tend to set it to 2. That way I can analyze a couple pixels next to each other.

09:02 - Alright 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.

09:09 - And any place where it gets sort of noisy kind of like right in here, we can tell that we have slightly lower contrast.

09:15 - If we go over and we look at that ad, we can see that yeah, we definitely have some issues here.

09:20 - So, up at the top, where it says developer friendly, it seems like it’s doing ok.

09:24 - We can toggle this mask on and off, so when 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 when we get down to the bottom, and it mixes with that background, it’s really really tough to see.

09:38 - So, this is an area where we know we might have to go back to the designer and say “Hey, I can show you this and I can definitively prove that there is a contrast issue here, and this is a place where we need to maybe tune it up.

09:50 - Either give the text a backing so it pops a little more, or figure out if we can use a different background image, something that doesn’t interfere with the text as much”.

09:58 - So yeah, using these tools and using a guide like OATMEAL you can through you can analyze the contrast for your site or application, maybe look for problem areas, tune it up, make sure users have a better experience.

10:10 - 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.

10:17 - As always, thank you so much for watching and I’ll see you next time.

10:20 - If you want to learn more about color contrast, we’ve got some additional videos you can check out in our playlist.

10:26 - Again, thanks for watching and I’ll see you next time. .