Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:23Length:2.5 hours
  • Overview
  • Transcript

3.4 Color Contrast

When designing a site, remember to account for users with color blindness or low vision that would prevent them from distinguishing between similar colors. The WCAG gives a ratio of 4.5:1 as a level of contrast between text and the background.

Related Links

3.4 Color Contrast

Hey there. John Hartley with tuts+ and a Beginner's Guide to Web Accessibility. In this lesson, we'll be taking a look at color contrast and how it affects your web sites. So we've talked a little bit about colorblind users, but we've also talked about users that have other vision issues. One of the biggest things it's hard to pass with web accessibility is color contrast. And that's probably because you really haven't ever thought about it before. And this is one of the pieces of a website that needs to happen at the design stage with web accessibility. If designer hands you a deliverable and says okay, here you go, go off and develop this website. And you come back and say hey, the color contrast on this isn't right, we're not going to pass anything, you need to redo the color scheme, it's not going to go over very well. So it's best to be proactive here and let your designers know upfront That hey, here are the requirements to pass and be web-accessible for a website. Let's make sure we're keeping this in mind when we're actually designing the site. Some designers may drag their feet, but hopefully, most designers will take this as an opportunity to expand their horizon, and ultimately find some creative ways to make sure that your website is accessible. So let's get into the nitty gritty of what being compliant with color contrast means. So this cumbers will 1.4.3 contrast, and this is a minimum contrast, it's level double a. The contrast it has to be a minimum contrast ratio of 4.5 to 1. And there are three things that it doesn't really apply to but we'll get to that in a moment. Here in our little sample page we have a few different paragraphs and you can see here that this one is very hard to read, this is hex code EEE and this is a 11 which means it's a fail, it doesn't match up to that 4.5, next we have a 1.7 to 1. And that is also a fail. And 3.7 to one, that's a fail. By now we start getting into our passes. So I refreshed this page because it's actually 18 points, instead of 18 pixels. And 18 points roughly translates to 24 pixels. So something that's a fail here, could be pass here because of the size of the text. After that we have this which is a pass because it's bold, and another thing with that is it has to be 14 point font or after doing a conversion 19 pixels. And then you have these just based on color alone are a pass. Now this does not apply to logo types. So for your logo it doesn't matter as much what the contrast ratio is, but you should still keep this in mind as you are making that. So if someone is color blind or unable to distinguish between two colors, then having a high-contrast logo is going to be much better than something with very low contrast. Now as an example of where something like this may be used, a lot of people think that the placeholder doesn't need text with a high enough contrast ratio, but that's not true. The contrast ratio still applies even to placeholder text in an input. You can say, well, the user isn't going to see it once they start typing in there, but the fact is, if that contains information about that form element, they need to be able to understand what that means before they click it. And a way to avoid that completely, Is to have an explanation of that field just associated with the label. Now this image is in here and this is an image with text on top. And this is here to just prove that one thing you can't do very well with the tools that we've already mentioned. So axe by d q and the wave tool from WebAim. They aren't very good at Identifying contrast ratio when text is on top of an image. So whether a text would be on top of this image itself or this text that's inside the image, it can't tell what the contrast ratio is. So this is where the manual testing aspect of it comes in. And I won't get too detailed on this portion of it, but there are many sites and I'll link to some in the notes, that you can test out the hex codes of the background and the foreground, and figure out what the ratio is. So here, the image has text to background of 1.8 to 1 as a contrast ratio, and that is a fail. So to wrap up this lesson, remember to let your designer know about this. And if you're a designer yourself, remember to keep this in mind as you're designing a website. It'll prevent headaches in the future when your developer comes back and says hey, this isn't the right contrast ratio and it's actually failing all of my tests. Would we be able to tweak it? And sometimes the tweak is very small, and other times the tweak would need to be very big. Either way it's important that we're testing all of our designs to make sure that the contrast ratio is high enough that anyone with vision problems is able to see it easily. In the next lesson we'll be taking a look at some more css examples and focus, along with tab index and what that means for your site.

Back to the top