Tools for Checking Contrast Ratio

[00:00:00]
>> Speaker 1: Yeah, there's all these great color pickers. You can see like an example here, where we have a blue on white, and the contrast ratio is extremely high. Meaning that if we look into the specifics, this passes both AA and AAA on every axis. And then we can see other ones that are a lot closer, like this sort of fuzzy red, I'm not sure what to call it against white.

[00:00:21]
And we can see here that it passes on some criteria, like it is AA compliant as normal text, but it fails to be AAA compliant on normal text. Again, there's more to think about, and I think about this a lot, like when I'm making slideshow presentations is that.

[00:00:37]
Certain colors might not be great for my body text, but they might be okay for the headers, because if the font size is sufficiently large or sufficiently bold, then it'll likely be compliant as it is. And one other thing that I wanted to talk about, this sort of dovetails into my other course, my DevTools course.

[00:00:54]
But there's some really nice tools out there. So if we go ahead and we open up the dev tools and there's lots of different tools we'll cover that do this kind of stuff. But if we go ahead and we find any element that's got some text in it, so here we've got like this span with some text in it.

[00:01:08]
And we click on the color of the element itself, we will see down here this contrast ratio. And so, we can see the kind of contrast ratio that would be acceptable for this amount of text. And we can see that we are AA compliant here. A cool thing that you can kind of mess with is if, let's say the background color was black.

[00:01:28]
And we go back into here, and we look at the contrast ratio, we can see that it has gone up to 60%. And we can also see on the color picker, this will be our kind of next exercise that we work on. These tools will give you a range on the color spectrum and anything up here in that range is going to be AAA compliant.

[00:01:45]
Basically like this white line that they've drawn across, and as we get lower and you can kind of see the 68 in the background there. As we get into the non-compliant terms, we can actually see that it's quite a lot more difficult to see. So, there's a lot of great tools out there, while you're prototyping, you can do this in Figma or Chrome dev tools or whatever it is you use to kind of do your designing.

[00:02:05]
You can get a really nice visual indicator of the text you have, and again, this takes the size in. So if we were to do something like change the font size to 100 pixels and then go back to it, we can see that the white line that goes across is now much larger.

[00:02:22]
We have a much larger scheme of kind of colors to play with here. Does this make sense? Feeling good to people? Okay, cool, yeah, some great tooling, yeah.
>> Speaker 3: I also noticed that the contrast setting, it was under experimental.
>> Speaker 3: Yeah,
>> I think like, not reliable or something.

[00:02:38]
>> Speaker 1: It is, the only thing that's experimental is that, they've been moving from this WCAG AA AAA into this advanced perceptual contrast algorithm. So they're experimenting with switching up the algorithm. Let me try it here, I was having some trouble with the default one earlier this week, which is the only reason I didn't show.

[00:02:58]
Okay, it is working. So this is the one, this is the normal one that is in production and it is the one that we are kind of used to seeing in this course. Is it AA compliant? Is it AAA compliant? I was having difficulty with it working on Tuesday, but it looks like it's doing really well.

[00:03:12]
And here is nice because it shows two lines, one to be AA compliant and one to be AAA compliant. So anything that's up here will be AAA compliant. In this little in between area will be AA compliant, and then out here will fall out of compliance. So, yeah, sorry about the experiment, but yeah, this is the default one.

[00:03:27]
Both will accomplish the same thing. If they're in the good range, then they will be good contrast. Yeah, I'll do another quick exercise here. This one is all about color contrast and I just wanted to give everybody a couple of minutes so they can play with it themselves.

[00:03:39]
So let's see, we've got exercise five color contrast. We've got a little contrast picker for you all to play with, where you can kind of see, is it AA compliant? Is it AA compliant? What's the contrast ratio? And if we take a couple of minutes to do and play with this, I'd also love to just give you an opportunity to Maybe open the DevTools or whatever designing tool you use.

[00:03:59]
And play with the accessibility features on there and just kind of see your current websites and things like that, how they are doing color contrast wise.