Hey there and welcome to Website Tip Friday!
So today, like we have for the last few weeks, we’re once again going to be focusing on accessibility. And today’s accessibility tip of the week really is color contrast.
Now before we really get into it I want to throw in this on caveat: and that this is more for web developers and designers. They usually have more control over the colors than you do. But it’s something that’s good to know so that you can fix these problems in the design stage maybe if you redoing your website.
Or if you’re adding content so that you know what colors not to use for your text.
So anyway, what is color contrast?
So in the simplests of terms, when we’re talking about color contrast for accessibility, we’re talking about the difference in color between the text and the background. There’s a whole lot of math that goes on behind the scenes to figure out the ratios and what not, but there are tools out there that do the calculations for you. So we’re not going to get into the messy details about math formulas and what not.
But there are some hard numbers that you kind of need to aim for. For example, the WCAG recommends a 4.5 to 1 ratio for normal-sized text. And for larger text, they really want you to go for a 3 to 1 ratio. Again, I’ll show you how to do these calculations online in a second.
But you’re probably wondering how does color contrast affect accessibility. Well, people need to be able to read what’s on the page, right? I know that there are screen readers out there, but sometimes people who have visual impairments still want to be able to read things on the web page.
And if a person has a visual impairment, sort of like red green color blindness, then they don’t see colors the way you and I do. And if there’s bad color contrast between the text and the background, they’re not going to be able to read that text. And that helps exactly nobody.
So how do you check the color contrast between your text and background? I’ll show you.
So the tool I really like to use is WebAIM, and they have a great they have a great contrast checker here. So as you can see, you have the foreground color which will be our text color and the background color. The example that they have pulled up is a great, great contrast ratio: 8 point 5 9 to 1.
If I were to check it with my text and background colors for my website, I get an even better one at 13 point 16.
I’m going to go in here and I’m going to just check some of my colors. Alright, so I’ve got my dark blue color here, and that gives us a much similar color contrast ratio. Now, however, if I were to go in and do it for my light blue color, this fails for normal text. The ratio isn’t quite correct here.
But if I were just using it for large text, it wouldn’t fail the double A, but it would fail the triple A. And then if I were to move it over here, and then try it with the light blue, again, same thing. It fails for normal text but passes for double A on large text.
You can just come in here play around with it, check your colors, get the contrast ratio, figure out if it’s going to work, if it’s not, and it’s a great tool. It does it all very quickly.
So there you have it. As we talked about, this is more for web designers and developers, but if you run a website, it’s something that’s really good to know so that you can avoid these problems down the road. And you can make sure the content you create doesn’t have contrast issues.
You should know that if you have a white background, you shouldn’t use hot pink as text color, because nobody can read that. If it looks questionable to you, just use the default colors included in the theme or website.
But that’s all for today. If you have any questions about color contrast, or anything to do with accessibility, feel free to reach out on social media or in comments down below. I also have a landing page over on my website that offers resources and people to follow so that you can learn more about accessibility.
Because again, as we’ve continued to talk about, web accessibility matters. Everyone should be able to use your website.
Leave a Reply