Color Contrast & Visual Impairments

[00:00:00]
>> For this next section we're gonna talk about a lot of different visual considerations, different things around color and how people perceive websites. And then we'll get into some really cool modern DOME API's that let us read a lot of user settings and control our app experience accordingly.

[00:00:16]
So one of the first things I want to talk about is color contrast. And color contrast comes up in a number of ways, mostly that there are a lot of different impairments that affect people's ability to see color. And that makes it really difficult to predict what colors will contrast well together and which ones will blur into each other.

[00:00:34]
It also can make it really difficult sometimes to signify like the difference between an error and a success state. If you don't have some additional helpers, which we'll get into in a little bit. But ultimately, it's really difficult to tell just by looking at colors if they're going to have high enough contrast or not.

[00:00:51]
Unless you're going with something very stark like black on white or white on black. So there are all sorts of cool tools that can help you with it. One tool that you can just do is the Lighthouse audit will actually look at all the content on your page and tell you if there are any contrast issues.

[00:01:06]
But if you're in the design phase, another really cool tool in this web contrast bicker. And so the idea here is that you pick a foreground color and a background color. And they will tell you the contrast ratio, but more importantly, they'll tell you if they pass or fail on a couple of different axes.

[00:01:24]
They'll tell you if they pass or fail for small text if they pass or fail for large text and if they pass or fail for text differentiated from some kind of border or interface like this here, this text input. And so what's really neat about it, the other axes sorry, is that they'll tell you if you pass or fail for AA compliance like we were talking about with WCAG or AAA compliance.

[00:01:45]
So, if you have something really stark, again, like just black foreground, white background, that's got a really high contrast ratio and it passes across the board. As you start getting into a little bit more iffy territory, like if you had a light gray foreground and a white background, it's got a very low contrast ratio and it fails across the board.

[00:02:04]
But what's really interesting to me is that a lot of times you'll end up with something. Let's see if I can find one like this in the middle, where you've got a reasonably dark gray on white. It's got a reasonable contrast ratio, but it fails except in certain circumstances.

[00:02:19]
So for example, this 808080 against fff, it's saying not good for normal size text. It's okay for large text if you only wanna be AA compliant and it is acceptable for graphic interfaces like a grey border around black text with a white background. So it's kind of interesting for a number of reasons because you start realizing that color contrast is a much bigger topic.

[00:02:43]
At least for me than I once thought it was where I thought things were either too similar or different enough to be contrasted. But it turns out that there's actually a lot more to it where it depends on the size, it depends on the surroundings, and it depends on how compliant you're trying to be.

[00:02:57]
So this is a great tool. I use it all the time in the design stage. A lot of design tools will also give you accessibility warnings, but I just find this tool is very easy. You can paste taxes in and instantly get some info. That's a really cool tool, chrome Dev Tools, which I also teach a workshop on.

[00:03:13]
I'm a big, big fan of the Dev Tools. They have a built in accessibility color checker, which looks like this. It's very neat. It's showing you as you're in the color picker, if the content that you're on is accessible or not in the same format, right? Well CAG, its AA or AAA compliant, what's the contrast ratio is.

[00:03:31]
The issue with this is that in order for it to work, it requires that you have a parent element with a background and a child element with a color. And if you don't have those, like for example, if you just had a body tag with both background and color, it won't be able to pick up on those.

[00:03:48]
But so for here as an example, if I open the Dev Tools, I made a Dev that's here. So if we take a look at it, there's a Dev called dark. And this Dev has a background of black and then there's a paragraph inside called light and that has a color of white.

[00:04:04]
And so from here since we meet the criteria, if we go ahead and we click on the little box inside the color. It'll open up the color picker and we can see that the contrast ratio information is here it's AA and triple AAA compliant. And then you can actually kind of drag it around in real time and see, okay, so this against black would be bad but as we get lighter and lighter, okay, that's double a compliant with all the way to white.

[00:04:27]
Okay, that's AAA compliant. So this might not work for all of your use cases. Again, if you just have one element with both they won't work. But, in certain situations when you're designing a child element inside a parent which has a background color. These can be really handy as well and they're all getting the same information though.

[00:04:42]
What the contrast ratio is, is it AA compliant, is it AAA compliant. The last thing I'll say on color contrast and this is a big one I see when I do consulting work especially, this is like one of the biggest ones that make it into production. Is that oftentimes we'll do front end validation on forms.

[00:05:01]
So before you submit the form, it'll check to see, did all the fields get filled out? Does the email look like an email all of these things right? And if they fail, they will often make the border red. And if they pass, they'll make the border green. And then it'll say something like, please correct your mistakes and submit again.

[00:05:19]
But the difficulty here is that those colors might not be distinguishable for certain people with certain disabilities. And then they will have no idea which fields are failing or which ones are succeeding. So that's why color itself and I like this WebAIM word and color is not used as the sole method of conveying content or distinguishing visual elements.

[00:05:40]
Meaning it's totally fine to use red for error and green for success. But you should put some text in there or a label or an icon or some way for folks to know an asterisk next to the errors. Some way for folks to know without just relying on color, where they need to interact and which ones are done.

[00:05:58]
Any questions on color, color contrast using those tools, or the basic ideas behind those tools? Awesome, yeah, again, just calling them out as I see like ones that I've seen a lot color on forums is like a big one that I've run into many times, that has been caught in audits.

[00:06:20]
Another one is just the world of visual impairments is a lot bigger than I once thought it was. There's this really neat extension called no coffee, which simulates various visual impairments. Unfortunately, they used to have a chrome version, but the chrome version has been discontinued. So if you want to use it now, you'll have to use it for Firefox.

[00:06:40]
But it's really neat and it can really kind of help you understand how different people see your website. So I'm going to switch over to Firefox here, where I installed the plugin and I'm just going to open it up. And so it does a lot of cool things.

[00:06:55]
You can mess with certain things directly like ghosting. So let me set this back to normal and you can mess with something like take ghosting and start expanding it and you'll see that the letters kind of start shifting from each other. You can also kind of simulate certain blockages that people have.

[00:07:14]
So like what, a glaucoma. Sorry, make that a little better central blockage or a corner blockage all these different things so you can kind of simulate things. I always really like this because it helps see how like some nuanced things like for an example I think like looking at some of these ones with, okay here we go with like floaters or something like that.

[00:07:41]
It can help me really understand that certain chaotic designs can be very distracting for some people. The other thing that's really important is for folks that have a limited range of view that you keep like content next to each other. I have this really interesting anecdote again from a conference that I spoke at where one where one of the other speakers that talked on accessibility had low vision.

[00:08:04]
So she wasn't blind, but she did need assistive technologies to help with a lot of things. And she was talking about how she had recently been learning how to code using a popular coding site. And the issues simply was that as she would type in things, the feedback loop so like errors, compilation errors, on the other side of her monitor.

[00:08:24]
And she has a limited field of vision, so for her she's looking at this it he, she's typing stuff, he's hitting run, she's seeing nothing change. Surgeons have given up on the platform. It's only weeks later that she's complaining to a friend that they realize what's going on, which is just that the related information was just actually physical distance too far away.

[00:08:41]
She wasn't able to see that feedback loop. So it's kind of interesting thinking about some of your UX structure. And for folks with limited field of view, and I also think it comes back into this thing of we're not just dealing with people with perfect vision and people with no vision.

[00:08:56]
We're dealing with this really wide range, this like ever growing population of folks with some sort of visual impairment. And so these things like using big font, good color contrast, keeping like things near each other, can be a really big help. I know this one is a little bit more on the design side than the development side but it's really good.

[00:09:15]
And I think as an accessibility developer, it's really good to be able to give your design and product folks that kind of feedback. Say hey, I'm a little bit worried that these things are a little far away or the fonts too small or the colors are not contrasting enough.

[00:09:29]
And yeah, this kind of the proximity notifications that I was talking about before where keeping like things together can help. This is also like, like I was mentioning that this helps folks who have low vision it also helps people with neurological disabilities. It honestly helps everyone for the most part, I think keeping things close together.

[00:09:46]
I think is another great curb cut example back to the first slide where you do these things to make things easier for people with disabilities and it ends up making it easier for everyone. So kind of a big giant win. Any questions on those kind of visual impairments?

[00:10:00]
I know it's a lot more of a gray area of the sense of it's hard to it's not a simple set of rules, right? I'm not like this needs to be this and the sort of color contrast is a set of rules. The rest of the stuff I think is just good food for thought.

[00:10:13]
Just something nice to think about.