Understanding Color Contrast

[00:00:00]
>> Jon Kuperman: And this is a very kind of foundational concept here, color and contrast. There are quite a lot of cool tools. We have one that we'll build in our next exercise, but WebAIM has a really nice color contrast checker as well. But there's quite a few things to think about here.

[00:00:16]
So I guess the things that we wanna think about are the most obvious that come to mind are the foreground color and the background color. And they mathematically have these contrast ratios with each other. And WebAIM and WCAG specify how much contrast you'll need in order to be compliant on both AA and AAA, which I think we can see here.

[00:00:36]
But before we go into that, there's actually quite a few other axes that we just need to be mindful of. Because it's not just foreground color and background color, but font size and font width also play a large part here. So the math gets a little bit more complicated, but if you use one of these professional color checkers, it will tell you whether you're AA or AAA compliant, remember the WCAG standards that we've been looking for.

[00:01:00]
And whether you're compliant for normal text, large text, or user interface components. And then some of them even take in font weight to account where you might be non-compliant. But if the font weight is bold enough, then it makes it stand out enough there. So this is one kind of big world here, just generic kind of color contrast.

[00:01:20]
And it has a lot of important implications because you can start thinking about a lot of the websites we build. And a lot of them will use color only to indicate things going on, a success green or a failure red or maybe a loading yellow or different things like that.

[00:01:37]
And making sure that the contrast is good enough to be indicated is a really good start. But it also leads us into kind of a whole other world, which is that there are a whole lot of different visual impairments that can make certain colors. Think about being colorblind, that can make certain colors really, really difficult.

[00:01:55]
So at my work, we have an accessibility team and they do some really cool work on. Because as you can imagine, a financial product, if we scroll down a little bit, is going to make heavy use of color, right? What is up, what is down, what is neutral, basically.

[00:02:10]
And so obviously, or maybe not obviously, but at the base, we wanna make sure that our color contrast is always good enough, that the green against the black and the red against the black stand out. But as we get into different vision impairments, we actually get introduced to a whole lot of new challenges.

[00:02:27]
So, there's all these great simulators out there, and so this one simulates a vision impairment. And you can quickly see how our green and our red, which a moment ago probably to many of us looked extremely unique and differentiated from each other, actually kind of meld into almost an identical yellow with certain visual impairments.

[00:02:46]
And so we've got a few things to think about here, we've got general color contrast, which is very important. We've got the idea of if color is ever the only thing that indicates maybe success, failure, progress, state, that can be dangerous. And then we've also got a lot of different visual impairment conditions to think about.

[00:03:05]
And so we've got a few different solutions here, I think that the color contrast gets us very far. I think that looking at any of these nice simulators and we can go over a couple of them in the tools section that help you simulate different vision conditions, go a long way in helping you pick colors that will work with a wide variety of people.

[00:03:24]
I also think that this is a nice area where if you use any kind of pre-made color palette, like Google Material Design or something like that, you get a lot of this kind of well thought out benefit. That they've already spent a lot of time making sure that their colors sufficiently contrast and also look good with a variety of impairments.

[00:03:42]
So a thing that we do at our work is that we've introduced a different color scheme. So we have two optional color schemes and you can see if we kind of scroll down here that we move the traditional green and red into this blue and red. And so you can opt into the CVD color scheme.

[00:04:02]
And here we can see that even with a wide range of visual impairments, you're still very easily able to differentiate between the blue and red or even if it looks like blue and yellow to you. So, yeah, I think in general these are quite cool ideas. They get a little bit complex because there can be difficulty that you might not think of when you're building things.

[00:04:22]
I think contrast is a great first place to start. And I think a great second place to start is where allowed adding some other kind of indicator for things like success, failure, price up, price down. If you can add a check mark or a red X, even if they can't tell that it's red, they can see that it's an X.

[00:04:39]
And that can be tried tremendously helpful too. Another thing to consider for a large application would be maybe having two different color schemes that can be opted into and out of.