Challenge 11: Relative Luminance in Sass

[00:00:00]
>> Mike North: We're gonna fix a problem that we ran into earlier that had to do with colors standing out with respect to other colors. Before we ended up using brightness, remember we said if the brightness value is greater than 70, we don't want to use white for the button text anymore.

[00:00:17]
The background is too bright for us to use white. So we'll use black instead. But we noticed that blue, blue and black, although that brightness didn't meet the criteria, there were something about it that made it so it's still wasn't very visible. So we're going to use this concept of relative luminance, which this expresses how visually bright one color is relative to another color.

[00:00:45]
And this is sort of where we're closely connected to how the human eye perceives color and what we see as good contrast of a foreground against a background. So we're gonna begin by kind of looking back at exercise six. We're gonna start from the same baseline that we did in exercise six, which was the if exercise.

[00:01:07]
And we had that lightness check there. And we're going to try to build something that works properly. That uses this more complex value instead of brightness. It is a little bit of a complicated formula here. So part of what's complex about this is that we have to deal with something called color spaces.

[00:01:33]
So we are RGB values, at least as we're using them right now, they're in what's called a gamma compressed color space. We need to move them into a linear color space. And this is what we're going to use as the equation that helps us do that. So you'll see on the top and by the way, each of these, this is sort of an equation that forks, right?

[00:01:56]
It's gonna be a function that if the channel value is below or above this little threshold of 04045, we'll either follow the top path or the bottom one. On the bottom one, we're going to need to use an exponent, right? And that does not come with SaaS, but I have placed a pow function, right?

[00:02:19]
So you are going to use an if for the split between the two, top and bottom half. And you're going to use pow to get that base value, which is just a fraction raised to the 2.4th power.
>> Mike North: So once we're done with this step, then we're going to want to weight these colors, these linear RGB values using this equation here.

[00:02:47]
And what we can see is that basically, blue is very, it's a little bit different than red and green by an order of magnitude, in terms of the ability for dark colors to stand out against it. And that is why our black text on blue button background looked like, like I'm surprised people in the room could see it at all, right?

[00:03:10]
It's quite difficult. So we're going to work on this for about 35 or 40 minutes. And then we'll come back and I will show you the solution. So the difference you're looking for is a relative luminance difference of about 0.7. That's the threshold at which you wanna kick from white to black.