Featured Feature WCAG Series Episode 3: Ensuring Readable Texts

Featured Feature: WCAG Series

A Featured Feature that isn’t really a feature, but is so important it gets its own miniseries: Web Content Accessibility Guidelines (WCAG).

In this episode, David (Product Designer at aNewSpring) dives into the basics of text readability and contrast. He explains why clear colour contrast matters, not just for people with low vision or colour blindness, but for anyone squinting at a screen in bright light. David keeps it simple: use strong contrast (4.5:1 for body text, 3:1 for larger text and buttons), skip text-in-images where you can, and quickly test your colours with an online checker. The goal? Clear text, visible icons and buttons, and a smoother experience for everyone.

👇 Watch the third episode.

Full transcript

 Hi everyone. David here, Product Designer at aNewSpring. And in this episode I want to talk about ensuring readable texts,

which is all about accessibility again, of course. So it's related to these three guidelines that you see over here. They're all about contrast, which is why I grouped them together.

And when I say 'contrast', it's of course about colors, on top of colors. So if you have a text here on the screen. That text is dark to make sure the background behind it is light, and if you swap it around, that works as well. But that contrast always needs to be there. And if you don't do that, then these users, users with low vision or users who are colorblind might not be able to see it or understand what's being portrayed on the page.

And also, another interesting one is that you have users in difficult environments. So let's say I'm sitting here behind my PC or laptop and I have a glaring light coming into my screen. I might, you know, have trouble seeing what's on the screen for those people having good contrast will actually help as well.

It's a bit situational of course, but it can happen. So these guidelines or these guidelines are really for everyone, basically. And why does it matter? Well, you just gotta have your texts, your icons and your buttons easy to understand so that everyone can just make use of them and know what's on the page, which just enhances the overall experience, of course.

And then before I go into the platform, I do have a little pro tip. Just simply avoid images of texts. So if you have an image with a lot of text in it or a big, you know, the text is what it's all about, just try to avoid that. It's not the end of the road, but just try to avoid that. Simply because they're not accessible.

That that's just what it is. There are some exceptions. Of course. If you have a logo with text in it, it's totally fine. Or some branding related stuff. Don't worry. You can still have those. Then you also have essential design elements is what they call it. And these are, for example, some texts that you have in a chart.

That's still fine as well, but if you have those, just make sure they're quite easy to read because of the contrast. Alright, so let me show you how you can check your contrast online and let me show you the platform, which colors in the look and feel you need to watch out for and maybe compare to one another to make sure there's enough contrast.

So, yeah. Let's go. Okay, so I have a little learning journey over here, and the things I wanna pay attention to are the texts, how big the texts are as well. So large or small texts, the icons and the buttons that you have on the page, which I have a bit below here, right? These buttons. What you wanna look for, is the contrast.

So if I see a very dark text on top of a white background, I know that contrast is totally fine. You know, everyone's gonna see that. It's gonna be great. No worries. The one thing I'm worried about a little bit though, are these pink icons, for example, on top of a white background. So that's what I want to check.

And you do that by going to a contrast checker. So just Google Contrast Checker and you will find it right away. So here I have the contrast checker of WCAG, and I have filled in both colors. So the icon is the foreground color, and then the back background is filled in over here at background. And then you can see if I scroll down, the contrast ratio is this much.

And then if I scroll down even further, you can see that it's a fill for all of these, including the user interface components, which is what an I icon is, right? It's a fill. Now I know for icons this needs to be a three, and then I can adjust the slider. Which makes it slightly darker every time. And then I get to three and you can see that these things are now a pass.

If you want to have it for smaller text, for example, for normal texts, it needs to go up to 4.5, and then you get a pass there as well. And if you wanna go for AAA, you have to go all the way to seven and then it's a pass as well. So that's how you check your contrast for your colors, basically.

Alright, now lemme quickly go back to the learning journey and direct your attention to one more thing and that's buttons. So here I have a button, but also inside an activity, you have multiple buttons, right? You need to make sure that there's enough color between the background of the button and the adjacent color.

So this gray color here, so you have the text. And the background of the button that need to have enough contrast, but then also the background of the button and the color next to it. So that was one more thing that I quickly wanted to address, and that's it for contrast. All right, so just a quick recap.

Make sure that your background colors have a contrast of 4.5 to one when it comes to smaller text. When it comes to large texts, make sure this is three to one. Do the same thing for interface components three to one. Once again, so buttons, right, and then also the colors that are next to the buttons, the adjacent colors, so to say.

And then of course, try to avoid images that have text in it, unless it's part of the branding or an important part of the image itself. Like, you know, the text you might have in a graph. So yeah, that's that. Alright, thanks for watching this episode on contrast. I hope once again everything was clear.

If you have any questions, please ask them. Or, you know, even just other questions related to accessibility, don't hesitate. We're here to help. All good. And, yeah, the next episode's going to be about your video content, your audio content, and how to make those more accessible.

So, yeah, see ya there.