Episode 005: Accessibility & 2021 Resolutions

Color contrast is very important - why do folks still ignore it in 2020? Tools, tips and tricks to really make sure your visual experiences are inclusive. Claire discusses a personal anecdote related to color contrast, and Steph really wants to write more CSS. What are some of your resolutions? Tell us at @wordwrapshow on Twitter.

Check out the Episode 005 Notes

Transcript#

Claire:

Hi.

Steph:

Hey,

Claire:

I'm Claire

Steph:

and I'm Steph.

Claire:

And this is word wrap.

On today's episode of Word Wrap. We're going to talk about two things: one accessibility, and two our resolutions for 2021, which is a year that I think we're all looking forward to, even though not much is going to change.

With accessibility, it is a large topic. So we're actually going to just do one little bit, which s color contrast. To some folks that might not be a little bit. And that's kind of why were going to talk about it.

A lot of folks talk about color contrast in the context of the web, but they don't really necessarily define it. Color contrast is the difference between the foreground and the background colors.

Specifically when it comes to things that are interactive or even just text, text has to be legible. You've all seen those websites where, you know, you've got yellow on white or, I don't know, white on yellow, even. Not an accessible combo, even someone without a visual impairment is probably going to have issues with yellow on white or white on yellow. I mean that's an extreme example, but it extends to text over images, you know, low light conditions, even just like, you know, maybe a gray on a black, little hard to read, especially with like, you know, brightness down or something like that.

So a lot of different variables to choose from and to, you know, just consider when you're designing a website, building a website. And even - this extends outside of websites, this is just in the context of websites. This can go to print. You know, it's going to be really hard for a printer to actually distinguish between two similar colors. And so color contrast, even, you know, comes into play in print.

Steph:

So getting down to like the brass tacks of what does that mean to meet contrast. Well there happens to be a ratio system, which makes it really easy to check actually with automated tools. And so you'll find that the ability to check contrast is available right in your browser and is available in all of the major design programs, whether inherently or via plugins.

So it's something that there's really no excuse not to check and ensure that you're meeting this contrast.

So putting this to numbers, what this means is there's a couple of levels of contrast, and these are defined by the web content accessibility guidelines, where there is a level two and a level three and where level two is the minimum requirement and level three is a bit more stringent.

So for level two, text in general requires a 4.5:1 contrast, and that can be reduced to a 3:1 contrast for large text.

Now, large text I'll admit this is something that I had in my head incorrectly for quite a while.

So let's get the exact numbers here. Large text is defined as 14 point, and I thought that meant 14 pixels. So if you have also fallen into that camp, 14 point actually converts to precisely 18.66 pixels and bold or larger or 18 point, which converts to 24 pixels or larger. So if you are below those two thresholds, You need to be meeting 4.5:1 to meet the minimum requirement for contrast.

Now, if you're going for AAA, that gets bumped up to 7:1 instead of 4.5:1 for that normal sized text. And then the large text requirement becomes 4.5 to one. So again, it's a lot of numbers to keep track of, especially if you're not used to doing this checking, but as I mentioned, it's built into browsers.

Browser makers are going to handle this a little differently. I tend to use Chrome or Edge most frequently. And so at any time, you, when you go to inspect an element, if it has a color property you may have noticed before and your inspector that it gives you kind of a little preview with that color, you can actually click on that and open an additional dev tools pane.

And it very clearly - they've made this a lot more prominent, actually just over the last year that it tells you the contrast ratio. And it's doing that by picking up on the computed background value under that text. Now where you still might need to do manual checking is if you have this text placed over an image.

Another area that it may incorrectly pick up the color for is a gradient. And in that area, I would actually recommend Firefox. Firefox does an amazing job of checking the two different points across the gradient to determine, and actually breaks down for you, which side is - has better contrast versus the other.

Claire:

I think it's worth noting that these ratios and these numbers and the ways to calculate these numbers are not an exact science.

These are manifestations of, you know, uh, folks that do not have visual impairments, trying to figure out a good, easy way to programmatically understand whether or not they're, you know, colors and their contrast match requirements, that folks that have visual impairments, um, have. So these, these algorithms are constantly changing. A web content accessibility guidelines, um, always are re - being revised, and this is a moving target. So you know what might've been true a couple of years ago may not be true now.

Like I think it's another good point that Steph brought up was, with regards to the points versus pixels. I think, you know, I've definitely fallen into that as well. So it's just, all of these things are good to keep in mind and it doesn't matter what kind of text it is.

If it's on the page, a screenreader is going to see it unless it's specifically excluded for screenreaders.

Steph:

So like, It doesn't matter if it's a button or a headline or even disclaimer text, which is usually shoved at the bottom, small font size. Like you still need to make that legible. And one way to do that is contrast, another way would be font size, which is usually another issue for that text.

Claire:

So the way that I personally relate to this, I have a really big issue with contrast with my own vision. I actually can't see very well, like dark, um, interfaces in like a dark environment, even though I prefer dark mode. For example, I can't purchase a car that has a red illuminated, uh, dashboard, for example, it's just really hard for me to see that at night. I can see it during the day, obviously, but during at night, it's that contrast that that takes over.

And so, you know, this is just a personal anecdote. Like I am not alone in this. There are multitudes of people that have colorblindness issues. There are multitudes of people that, um, you know, just need more brightness to see certain things. And it is not anyone's responsibility to tell you that they have these issues. It is your responsibility to not not think about these issues, if that makes sense. Um, I know I used the double negative there. You are supposed to think about these issues.

If this first time hearing about color contrast, congratulations. You now know about it and you cannot ignore it anymore. And I don't know care if it doesn't work with your design, make it work with your design.

Sometimes these things are very minuscule in terms of their impact. Like, you know, let's say that you, your chosen colors are 4.3 to one contrast ratio that might take like three points on a hex scale to make it 4.5. And that might be the world of difference to someone that has issues with contrast. So this is just, just this matter of empathy, matter of, you know, just giving a shit. That's my little spiel. Also car manufacturers, please stop making dashboards that have red illuminated displays. Thank you.

Steph:

Love it.

Um, so I have a 30 second rant of my own before we move on to our next topic. Which is it's not just text, it's also graphical interfaces. And as a general rule, graphical interfaces - so things like buttons outlines on text inputs, other interactive elements that the user should be able to discover and, and use. The ratio for those begins at 3:1, so it is a reduced contrast ratio. You know, there's some related accessibility issues there, like properly labeling so people know what they're interacting with. Um, but that's a topic for a different day.

But with that in mind, the other thing with interactive elements is that you are now dealing with states.

And so when you have a button, this is one that is, gets missed a lot. I have a community project called StyleStage.dev, and the most frequent feedback that I have to give to contributors is to fix the contrast when they create a link that it looks like a button. Because that button, they get the contrast correct for the text to the button background. But the button background needs at least a 3:1 contrast with the page background or the image behind it, and that trips up a lot of people.

Oh, and then guess what? Now you have state, so you have a hover state or a focus state. And while the hover state's not required, that's kind of a feature folks choose to do, the focus state is required. And now that you have a focus state in play, you now need a 3:1 contrast between the default state and the focus state.

And don't forget that focus state needs to maintain that 3:1 contrast with the page background as well. So you now have a triangle of contrast that you're keeping in mind across all those states, plus the text over the button at all times.

So, that's my, uh - that's probably the biggest offender that I see as a browser of the web. As someone who doesn't exclusively use keyboard navigation, but frequently does, I'll definitely encounter that and I'll lose my place visually on the page, my tabbing order. So it's, it's beyond text contrast.

Claire:

Definitely. I think you could say that these requirments cascade into one another. I'm not sorry for that pun.

All right. Um, well with that little rant and aside, uh, that wasn't an aside, that was part of our conversation today. Um, let's talk about our next conversation point, which is resolutions for next year.

Um, 2021 is probably the most anticipated years in years. In my life, at least, I don't know. I guess I was really excited for like being 10, probably at one point in time. Anyway, I digress.

Steph:

I was stressed out about ten. First double digit number.

Claire:

True. There's a lot of pressure.

I think my first resolution is to be less judgemental on new technologies, uh, that might be coming out. And just give things a little bit more of a chance, have them make more of a case before I'm like no, or yes, or all the way.

I recently have talked about like why I think serverless is a terrible word and how HTML has always been over the wire, we just threw a bunch of JavaScript in front of it. But, you know, a lot of these technologies do have - by technologies, I, for some reason, I'm reminding myself of all the like OxyCleans and stuff like that. Anyway, that aside, you know, I think about how a lot of these newer things that are coming out are just new ways of doing old things. And it's kind of magical that we keep reinventing the process and that's kind of really cool.

And that's kind of the whole point of the web, you know, cause as we've discussed on this show before, like the web is not at all what we used to be. But at the same time it is. So it's like, it's, it's, it's very cool to see the change over time, which my world history teacher from high school would be very, very happy that I just said that buzzword. Or buzz phrase? Anyway, that's one of my resolutions.

What about you, Steph?

Steph:

Um, I think like my resolution is like to write like more CSS, probably like...

No, um, yeah, my resolution is to find the balance between posting my own content and also elevating some amazing folks that are out there. There's so much, there's so much content, so, you know, overwhelming to wade through. And so I need to find a better system to like help elevate some of that amazing content, you know. And, and to Claire's point too, like sometimes it's difficult because you want to - I guess I feel a responsibility if I share something that I want to truly share it as a co-sign that it's a good idea. And so sometimes I'm like, that's really awesome, but it's not accessible. Right? And so I don't, you know, that's one of the reasons I may not share particular pieces of content. I might like it, and be like, that's awesome.

But you know, so, so elevating more folks. I've - I have a greatly expanded, like who I'm following. Um, unfortunately with the Twitter algorithm, they don't show up in my feed, even with it turned off of top tweets very much. So anyway, finding, find - if anybody has suggestions for like tools that help you, like make sure you're, you're keeping a better pulse on, on your network, your community.

Um, cause I really do think of, you know, the folks I've met particularly this year as like an extended community that this year would have been way darker place without growing in that community aspect. So I'm open to suggestions to help on that resolution.

Um, I think that the other one that comes to mind for me as more of like a suggestion that I would have for the web community at large. I think a lot of the things when we go to criticize them, usually it's accessibility, but a lot of times it's performance-based. And I think that we're not using the native web platform to its fullest on what it can offer for us for performance. We choose to like go beyond and over-engineer rather than peeling back and seeing what we can use. So like for myself, I want to learn more about service workers and like various caching methods and these other things to help. Um, also image handling and, you know, proficiently using like the picture element and these, these tools that are available. Right? Like I don't do really image heavy stuff, um, but it's something I need to learn more about so I am prepared.

Claire:

Yeah. I think on that same front, I talked a couple of episodes ago about, or maybe it was last episode. I have no idea. But I talked about, you know, engineering, a new Angular application and like, yeah. I feel like sometimes I feel like that flies in the face of exactly what I've been talking about, which is like less JavaScript, better performance kind of stuff. But, you know, I've also thought about it as like more of a challenge. It's a challenge to make that performant because it can be performant. I view it as more of a challenge instead of a: I'm saying this, but doing this exact opposite thing.

So I need to get better about my thinking in that, because you know, all of these web technologies exist for a specific reason. And as an engineer, I picked that platform for a specific reason, and I know why I picked it, but it doesn't have to fly in the face of my ideals. If that makes sense. I need to get better about being more confident in my decisions, which is funny to say, I have, you know, I've been in this industry for, five, six years now and I'm still questioning my every move. So, I mean, if you're just starting out in this industry, like you, you're not alone in that. And then I'm sure that folks that have a much more experience than me, um, would also feel the same way.

Just more confidence, exude confidence, if you will.

Any parting thoughts before we go, Steph, do you have any parting words to 2020? Do you have any thoughts? Feelings? I think January and February were just fantastic. I remember them being fantastic, but...

Steph:

They were. The golden age. We can go outside. See people. So good.

Claire:

Or you know, just go to a park without a mask on. Little did we know. Oh, well.

Steph:

So go forth and resolve to make the web better. And the world. In 2021.

Claire:

And don't forget your color contrast.

Steph:

Thanks for joining us on another episode of Word Wrap. Be sure to subscribe on your favorite platform, or pick up the RSS feed on wordwrap.dev. You can also catch us as @wordwrapshow on Twitter. Until next time!

Review the Episode 005 Notes