Viewing Accessibility Information

[00:00:00]
>> Jon Kuperman: Another one that's nice is the accessible color picker, so this will be our first deviation from the standard dev tools into an experiment, but I think it's worth seeing a quick shout out. There's a very cool accessibility course coming up very soon by me. But yeah, so accessible color is really nice, you wanna make sure that your contrast is able to be, differentiated by people with a variety of different conditions and sightedness.

[00:00:25]
So you can go to the, let me just make sure that we go slowly here, you can click on the setting cog, you can click on experiments, we will cover a lot of experiments going forward. We can click on one of these cool accessibility color contrast program one, and then close it says we have to reload, we'll do a reload and now we can click on a color.

[00:00:46]
Yeah, I'm not sure why that's not showing up on my NAV bar, but this is a really great tool. So what you'll see basically is through the dev tools, you will be able to click on anywhere that you're using font color. And with that experiment enabled, when you click on it for the font color, you'll see this new section here, which is the contrast ratio.

[00:01:03]
And so you can click to expand to this here and you can see whether or not the contrast ratio is compliant, meaning that it is good enough for people with a varying sightedness. You can also see this one's a bit hard, but you can see that there's this white line at the top and the implication here the experiment adds this.

[00:01:20]
That anything in the upper left section of this is accessible and then anything outside of it is inaccessible, and so basically it's like if the font color gets too dark, then it will be inaccessible. And you can see this is marked to slash through, we move it back up to the top and it's a check.

[00:01:37]
The other thing I wanted to say on this is it's not just about color, it's font size as well, so there are contrasts that are acceptable at a certain large font size, but unacceptable at a lower font size. So I think as an example, if we were to change the font size here to like 100 pixels, or something like that.

[00:01:54]
And then open this up, we would see that the white line is now very different, right for 100 pixels, we actually get quite a bit of room, this is all accessible, and then this is inaccessible. This sort of makes sense as a concept, you enable the experiment, and then you can click on anything that has a color, and you'll get this contrast ratio that you can kind of have a play with.

[00:02:13]
>> Speaker 2: Someone in the chat mentioned maybe it's because it has to be a text element that's selected.
>> Jon Kuperman: I wonder if you're right, yeah, maybe it's just the fact that you are totally right. That's great, that's great from the chat, so I think before I was looking at a parent element that didn't actually have any text content, I was looking at the NAV itself.

[00:02:33]
And what we actually need to find is the element that actually has the text content, and that when we open it up, we will see the contrast ratio, and we will see, thank you very much. Chat for that, yeah, that's great. So this is an experiment I leave on all the time just to make sure that I'm always have accessible fonts and background colors, but a nice, great one.