- All right. So a quick introduction. Hi, my name is James Sullivan. This is my first conference ever and today I'm gonna be talking about accessibility in color systems. So a couple of things just about me. I was born in New Jersey, I graduated from Virginia Tech back in 2014, currently I live with a dog and a cat. You might hear them in the background, I apologize if you do. My personal favorite color is maroon, and as of right now, I am a product designer at CarMax for their native app team. Formerly though, I was the visual system designer, and that is why I'm here today. And we're gonna be talking about accessibility and color systems while I was a visual systems designer. So I wanna start with the question of just why should we care about accessibility when it comes to colors? In one word, it's inclusivity. Designers, in my opinion, should be taking it upon themselves to create experiences that those with color blindness or poor vision can still use. But three years ago, it was an uphill battle to get everybody on board. Unfortunately, this was the mentality that we were fighting against. It became our problem to help people understand, how do we help those in our company build empathy for everyone and not just car buyers? And if we can solve for this, not only are we pushing accessibility forward, we're gonna be doing the right thing and that's really what accessibility is about, it's doing the right thing. And I can understand from a personal standpoint, sometimes accessibility could be daunting, but by the end of the presentation, I wanna help you guys understand that you don't have to sacrifice aesthetics to be accessible. So let's really just talk about what does accessibility mean? How can we quickly get buy-in from everybody that doesn't have the mentality that we have? So I would venture to say that reading is pretty important on websites and apps. Case in point, are you able to read this? But if we don't have accessibility, we can come up with scenarios like this. You can't really read this. And then lastly, if I had this as my color combination throughout the entire presentation, I know for a fact a lot of you would probably leave this talk right now. So understanding accessibility and color contrast is extremely important to designers. Now let's take an example of the technical aspect of accessibility in contrast. If we have a white foreground, or in this case, white text on a black background, this would have a color contrast ratio... Or, sorry, a contrast ratio of 21:1. It's the highest amount of contrast you can achieve in the digital space. And when it comes to accessibility with colors, the contrast ratio dictates all. So it's 21:1 for a white foreground on a black background. But if we also swap the foreground and the background, we still have a contrast ratio of 21:1. This inverse property is gonna become very important later on in today's presentation. On the other side of the spectrum, we have if the foreground matches the background, we have a contrast ratio of 1:1. This is what we would call failing accessibility. If 21:1 is passing accessibility, 1:1 is failing. But there is a bare minimum, and that's what I wanna talk about. In order to pass accessibility, we need to achieve a ratio of at least 4.5:1 It's the minimum for a lot of the WCAG requirements when it comes to UI. So for today's presentation, here's what I really hope to answer. How can we always have a 4.5:1 contrast ratio or above? What is the biggest benefit to baking in accessibility to a color system? And how can we identify flaws in a color system? And then with those, how can we fix those flaws? So in order to answer those questions, we have to go back three years to when I started at CarMax. Back then, I was the newest member of the design system team. And for the first few months, I was able to play the, "Hi, I'm new here. I don't really know a whole lot" card, and asked a lot of questions. And I wanted to learn a lot about the current state of the system. And one area that I was very curious about was the color system. So about three years ago, this is what our search results page looked like. And if you look hard enough, you're gonna find accessibility violations. We wanted to make sure that if we ever created a new color system, these violations would never happen again. So, in my opinion, what is causing these violations? Let's actually look at the colors themselves. Each color family back then was broken up into five different ramps. It was nine families with five different ramps. For example, this is the 500 ramp. It was meant to be the main or the average color of the family, the one that was "most used." And then each color had two darker shades, a 700 and a 900, and two lighter tints, a 300 and a 100. This is the numeric organization that was set by Material Design's palettes, and so we incorporated that. My first question was what made a color a 900? Was it just because it was darker than the 500 or the 700? Secondly, what's the consistency with the 300s? Now, at the time, there weren't a whole lot of answers but I had a lot of observations. First and foremost, we had four blue families which felt very excessive. Another one is that the orange-500 and the yellow-900 are actually the exact same color. And then lastly, I just didn't have a firm understanding of the consistency behind the color ramps. And for me, one of the biggest issues was without logic behind the system, there're going to be flaws and inefficiencies. Now, why is it a problem for a designer? Well, a color system should be seen as a toolkit for a designer. And if we just give them a tool without helping them understand how to use it, it's going to get improperly used. Without the consistency across the families, it becomes even harder to speak specifically about when to use something like the gray-900, but not the yellow-900, or when to use blue-500, but never the blue-300. And if you're wrong about the... Well, sorry, if you're wrong about the combination, you might not even know that you're wrong. Now let's take a deeper dive into what these inconsistencies actually are. So at the time, I was just learning what accessibility was, and I wanted to see for myself what our color system had to offer. So I began by checking to see if the blue-900 and the sky-500 pass accessibility. Which they did, which was great. Then logically, I assume that the red-900 and the orange-500 would also pass accessibility. But they didn't. So what's going on? Well, the problem was a lot larger than I expected. So what I did was I ended up putting each color up against each other and checking to see if they pass accessibility. In other words, if they have that contrast ratio of 4.5 or above. The combinations that pass accessibility are shown. All those empty squares though you see are combinations of colors that fail accessibility. So let's look at something like the orange-900. With orange-900, that means that there is only one color in this color system that would pass accessibility if it was used as text on top of orange-900. And the exact same thing with the red-500, and the same thing with royal-300. That color was the darkest color, was the blue-900. Then we have something like the blue-300 on the left-hand side. No color in our color system works if blue-300 is the background or even the foreground. Now this was CarMax's flaw, and as the visual systems designer, it quickly became my flaw. Here's why. If I had to onboard a new designer every month or even sometimes two every month, I had to explain these points to them, these nuances of the system. My first year was saying, "Hey, don't use blue-300." Or, "If you use sky-100 as a background, use these text colors, but not these texts colors." Or something like, "Never use red near yellow." It was horrible. So if we wanted to ensure that we created a more accessible color system, we had to learn exactly what it took to achieve the 4.5:1 contrast ratio. If we can understand the why, we can understand the how to fix our flaws. So let's do a problem recap. The current CarMax color system is lacking accessible color combinations. If we scale the color system without accessibility in mind, it gets harder and harder as more designers are hired. And lastly, understanding how to achieve a 4.5 contrast ratio is going to empower us to create a better system. Let's jump into research and exploration. We know the problem that we have. We now know that accessibility is going to be coming into our company, so how do we research and explore our possibilities? Well, this image right here should be pretty familiar with a lot of designers. It's the color picker from Photoshop, and more specifically, it's the color picker using the hue, saturation, and brightness graph. The hue is represented by that vertical band in the middle. It covers 360 degrees of color, going from red to orange, to yellow, to green, to blue, to purple, back to red. In this image though, we have the 210 degree which is a blue. The x-axis is saturation and then the y-axis is brightness. So when we start our research, we thought, "Hey, let's limit ourselves to 360 degrees of hues, that's gonna standardize our research." I know 360 seems like a lot, but realistically, it was actually helping us organize. And the easiest part of it was that I could refer to blue, not just as blue, but I could specifically say this is blue 210 degrees. Or if it was red, I could say this is red 306 degrees. When I talk to a developer, they'll understand exactly what I'm saying. And remember, we always wanna strive for consistency and organization in a system. Now, during the exploration, I had to have several assumptions along the way and here are my first two. Number one is that hue is a great basis for our new system. We're very familiar with hue. We see it in our day-to-day lives and it creates that organization that we're striving for. Number two is that understanding the contrast ratio will lead to a better system. These two assumptions stay consistent throughout this entire process. So how do we take a hue, saturation, and brightness graph and make it into something that we can study? Well, we know that the x and y-axis are on a scale of 0 to 100. That saturation and brightness goes from a scale of 0 to 100 while the hue stays consistent. So what we can do is break that graph into 10,000+ dots. So remember when I said that 360 is a low number? This is what I mean. Each dot represents not only the hue, but also the saturation and brightness. So if we look at this right here, the far left side is grayscale, going from the top of white to the bottom to black, regardless of the hue. It could be 210, it could 360, it could be 30, that far left side is always going to be grayscale. The bottom row right there, though, that's gonna be black. That's gonna be consistently black. Everything else is just a light blue or a dark blue. Or if it was a red hue, the light red or dark red. So we now have something that we can study. So how can we use these grids to study accessibility? When we fast forward about two months into the research, we get this. Realistically, all this work took about six months total. So in the beginning, this was actually just a side passion project, but it quickly snowballed into something that we can actually act on. Those assumptions that I mentioned earlier are the ones that I took to my manager and said, "Hey, let me work on this for a little bit. I think we're onto something." So what I'm showing you here is about two months into the initial research. I befriended a developer, his name is Reed. What he did was build a microsite to help me solve the question of, out of these 10,000 dots, which ones pass accessibility if there's a white foreground. And if we can identify a pattern, we can study it. And if we can study it, we can find repeatable answers. So being the genius that Reed, is he created a filter for me. In essence, this is a 4.5:1 contrast filter. There is a distinct line that is created when we show which colors passed with a white foreground. Whatever failed we rendered in red. So that what is showing passes if there is white text put on top of those. I wanna explain this behavior through a GIF. If we actually apply this filter across all 360 hues, this is what we get. So as the hues change, that threshold line changes too. It's almost never linear. And naturally, there are actually some colors that have more or less accessible options for a white foreground. So if we look at this, blue, purple, red have more options. Green, orange, and yellow have less options. Yes, it's almost in the middle, but it still has less options. So what can we do with this? Well, with a pattern identified, we're able to take samples from the beginning, the middle, and the end of the threshold line. In this case, we're still using the blue-210. We took the middle sample from three other hues, an orange, a green, and a purple. What we did is we took those six samples and laid them out into multiple color spaces. What we had to find was the underlying thread for the one consistent element. So here we have HEX code, RGB, CIELab or Lab color, and at the bottom rows, we have hue, saturation, and lightness, hue, saturation, and brightness. Now, there is a small difference between the hue, saturation, lightness and brightness, but really, what I wanna focus on is that CIELab. Well, you'll notice that because these samples are along the threshold, there has to be that consistent element. And with the Lab color, we found that consistent element. None of them went above 50. All those always went to about 49 point something. It was never 50 and it was never above 50. So I wanna talk about that. I wanna talk about Lab color. The L in Lab stands for perceptual brightness of a color. The a is the value between green and red, and b is a value between blue and yellow. And visualized, it looks something like this. So that lightness value, similar, yes, to hue, saturation, and brightness, goes from 0 to 100, but there is a key difference, it's that and a and that b. The a value goes from a -128 to a +128, and so does the b. And if we actually apply it, we combine those three scales into colors. So this is if the lightness is at 50, and the a and the b are at 0, we just get a gray. But if we change the a and the b, we still get a lightness value of 50, but now we can actually create a green. It's a different color. And if we do the exact same thing on the other side, we're able to create purple. Now, this is what's really key to our research is that the lightness value, if it stays the same, one, we can get different colors, but two, we get consistent accessibility. So looking back at the swatches, we know that in order to pass with a white foreground, the lightness value cannot be higher than 50. The 50 value was the threshold that we were looking for. But we can take it one step further. We can also establish that backgrounds with a lightness value of 100:50.1, so white to a medium gray, will pass accessibility with a black foreground. If you put black text on top of it, it will pass accessibility. And then on the other side, backgrounds with a lightness value of 49.9 to 0, that medium gray to black, will pass accessibility with a white foreground or white text. This was extremely important to us. The next thing though is that we needed to figure out what happens when we have colors that aren't just black and white. We know we have to have a color system that has reds and blues. How can we find a repeatable pattern, a system? Let's quickly recap before we go into that. So using hue degrees is going to add an element of organization to a color system. Every color has a lightness value between 0 and 100. Lightness value of 50 is the threshold for passing on a white, white-black background. And lastly, developers are the best. I owe a lot to my friend Reed. So we have information. With the exploration done, what we wanna do is take that knowledge and apply it to the current color system. So take what we know about lightness value and apply it to what we already have. Here again is the current color system that we're working with, with the color... Or sorry, with the contrast grids on top. Let's make a third assumption about this system using our lightness value knowledge. Our current color system has inconsistent lightness values. So we know that the ramps are inconsistent, but now we can specifically define what it is that is inconsistent. So if we take these swatches and convert them, this is exactly what we were seeing. We converted the current color system, their lightness values were just all over the place. The 900 color ramps were not similar to each other, nor were the 700 color ramps. Some saving grace was that at least the one 100s were fairly consistent, but it still was not good enough. And if we actually graph this out, we get this. On the x-axis, we have the color ramp designations, and then on the y-axis, we have the lightness value of each color. So because each color family had its own line, the lightness values didn't line up and we got inconsistent contrast grids. This was proof that our color system was flawed. So let's take a deeper look at what we're actually seeing. In this example here, we have orange-100 and sky-100. It's the same lightness value and they have the same contrast grid. Now here, if we have two different color ramps, the red-300 and the green-700, they had the same lightness value, different ramps, same contrast grid. So a pattern was emerging. And our last observation was around the blue-300. From the research we did before, we know that 50 is a threshold. But here's the kicker. If 50 is the threshold, that also means that it only passes with the extreme colors. So it only passes on white or black, nothing in between. That's exactly what we were seeing with the blue 300. Is that it's not passing with anything that's in the middle, only with the extreme, and thus no other color in the color system is working well with it. So we have all this information, we make a fourth assumption Colors with the same lightness values have the same contrast grids. And if they have the same contrast grids, then, in theory, we can predetermine how many color combinations our new system has. What we don't want is the inconsistency that the current system has. Now, that exercise proved out that if we used colors with the same lightness values, they can have the same contrast grades. Now, how do we actually do that predetermination? How do we figure out how to do that? Well, we can ensure if we're able to solve this, we can ensure that there are gonna be certain blues that pass when combined with reds. But we can also do this if we have lighter blues with darker blues. So how do we actually solve this problem? Well, again, here's what we know. From 100 to 50.1, it passes with black, 49.9 to 0 passes with white. So then the question was, "All right. What's gonna happen when the lightness value is 10? Or what about 40? What about 60?" So what did we do? By now, I think you already know that I like my grids and my graphs. So we actually put each lightness value up against each other to check to see if they would pass accessibility, that 4.5 contrast ratio. This grid is probably one of the more important things that we got out of our research because now we can confidently plan out a color system and know which lightness values pass each other when it comes to accessibility. Now let's look a little bit deeper here. The x-axis goes from 100 to 0, and the y-axis goes from 0 to 100. And so in this example, I know that if I have a color with a lightness value of 85, any color that has a lightness value of 0 to 41 is going to pass accessibility. And then alternatively, I know that if I have a color with a lightness value of 65, any color that has a lightness value of 0 to 20 is going to pass, using this chart. Before we get into creation, I just wanna do an examination recap, and let me take a drink. All right. Inconsistent lightness values directly affect your color system's accessible color combinations. Colors with the same lightness value have the same contrast grid. And lastly, we can predetermine whether colors will pass accessibility based on lightness value. Now, let's get into the fun part, the creation part. So we know with the new color system we want to avoid this scenario. We know that if every color... Sorry, my dog. We know that if every color family has a different lightness value than the contrast grids are going to be inconsistent. So what do we do? Well, we start with a line. It's exactly where we started. It's the construction of the new system here. If every color family followed this one line, then we know we're becoming, one, more cohesive, and two, more systematic. And what can we do with these values? Well, we can take these values and go back to our chart. We can actually plot these values out onto the chart and anticipate what color combinations we can actually achieve. If we take these and we actually display it out, this is going to be the backbone of the new color system. So long as every color in the 50 ramp has a lightness value of 98, we knew it would work with the five darkest colors. And so long as every color in the 1000 ramp had a lightness value of 15, we knew it would work with the six lightest colors. This is how you can use accessibility to plan for a systematic approach to colors. It was extremely important to get to the designers and tell them, "We have accessibility baked in, you don't have to do as much work, we wanna do the work for you." So we take this backbone and we go back to our friend Reed. We say, "Hey, I need to translate these values into something I can physically see and physically show everybody. Can we add another filter? Can we only show the dots whose lightness value is equal to the values that we just defined?" This is what we get. These bands here are the color ramps that we need to create our new families. All we had to do is pick one dot from each band to create a unique color family. And it looks a little bit something like this. In this method, we thought that if we have a 45 degree line from the top left, whichever dot intersects that line we put into the color family. And we end up with this kind of muted, gunmetal blue. It's not awful, definitely validates the fact that we're getting a little bit more cohesive color system, but it is not CarMax. We want more vibrancy. So what did we do? Well, we thought back to that GIF of every color changing with its curve. And rather than a linear solve, we wanted to go with a more curved solve. So all the research that we are doing is pointing to the fact that it's not linear, it's not black and white. We wanna physically manifest that philosophy into the creation of the new color system. So every color that we put into the new system had its own unique curve. And in this case, blue-200 had a circle with a curve that was going clockwise. And now, instead of those gunmetal blues, we have more vibrant blues. And more importantly, that blue-900 was actually our brand blue. That was the one caveat that we had from the get-go is you have to incorporate the brand blue, we cannot change that color. I said, "Cool, we got it. I can solve that." Now, as a designer and someone who likes video games, I wanna have an Easter Egg in my color system. And the way that we can do this is by flexing our knowledge of what we're dealing with when it comes to accessibility. Well, with that 45 degree line, we got the gunmetal blue, and with going clockwise, we got vibrant blue. But what we could do is instead of having pure gray family, we can reuse the 110 hue, that blue, instead of going clockwise, we go counter-clockwise. And what we're able to do is actually not get a gray family, we've got a slate family. I also called this asphalt because it was car-oriented and I wanted to get people on my side so it was either asphalt or slate. What it wasn't was just gray. It was using that blue-210 and incorporating blues. And again, this is how you get accessibility and you create perfect aesthetics with it. Was this the most game-changing thing ever? No. Was it fun to do though and exciting to talk about? Yes. Yes it was. But before we go on, I do have to talk about yellow. CarMax's two colors are navy blue and golden yellow. And even though we did six months of research, unfortunately, we were not able to find a solve for the yellow family that we were proud of. Even though we used the same lightness values, if we go for the highest contrast... Or, sorry, the highest brightness and the highest saturation, we still end up with this. The majority olive tones that really just don't represent CarMax. And so what we had to do is just go back to the old yellow. And what that was was just using Material Design's color palettes, and saying, "Okay, we don't want to disrupt the brand yellow so we're just gonna have to stick with the palette that we have." Personally, I took this as one of my biggest failures, and still something that I wanna solve eventually. And so now, for the final reveal, sorry, final reveal. Here's what we started with. There was nine families with inconsistency across the board. And here's what we ended up with. It's five families that are cohesive, that have accessibility baked in, and the yellow family kept as is. And we were able to maintain our brand colors. So that yellow-600 is our brand yellow, the blue-900 is our brand blue. In this case, accessibility does not have to be a hindrance to a designer. Because of accessibility, pushed me forward as a designer and helped me understand that colors can become beautiful when accessibility is actually applied. Then of course, as promised, because of the consistency with the lightness values, we have consistent contrast grids. So here we have, on the left-hand side, the 50 ramps. The 50s work with the darkest colors. And then on the right-hand side, we have the 1000 family. The 1000 family always works with the lightest colors. And so on inward, we have almost a reflection or a balance with the contrast grids. This is gonna become very important when it comes to dark mode. So what can it actually do? Well, no longer do I have to say these three sentences of, "Don't use blue-300." Or, "Use sky-100 as the background with this kind of text color." What I'm able to do now is using vocabulary because of the consistency, I can say, "Any 500 and below works with the 1000 color." Or I can say, "Use the 600s as a background for key elements. If we use a 600 colors next to each other, they actually work really and create a cohesive system." Or I can say, "Hey, use the 900 as text color if you want higher contrast on a white background. The 600 has a bare minimum passing contrast, but if you want higher contrast, use the 900." And when I say these things, designers know what I'm talking about because in the toolkit, those numbers are applied. And when we all talk to our developers about it, we're all using the same language. So lastly, we actually do need to validate. We created a great color system. Those that were along for the journey knew what we were doing, but when it came to actually presenting this, we still had to validate. So what did we do? First and foremost, we gave the new colors to our illustrator. On the side, I told her, "Hey, try to break this color system as much as you can." And instead what she did was come back and give us these beautiful illustrations that show off the fact that this is now a cohesive system. Using all blues, greens, and the yellows, you're able to create these beautiful illustrations But there's another aspect to it, the UI elements. So we have to make sure that the colors are serving the UI purpose. Here we have an error state for a form field, a success state for a form field, and then a vehicle tile that's using the raspberry, the red, and the blue colors without out looking too disconnected. One of the harder parts was trying to explain is like, "This is not off-brand, this is actually an accessibility first while we can still stay on brand." And here is actually how we applied that. So this was where we were with the search page. Because of the color work and how long it took, we were actually able to level up the designs over time. So goodbye to the old search page, and hello to a new, more modern CarMax. Brighter blues, brighter slates, more cohesive. Now, the last thing I do wanna talk about is dark mode. Let's go back to that concept of the reflective color contrast. Sorry, reflective contrast grids. They're almost like balanced, right? There's almost a symmetry between the light and the darks. And the other way that I could say this is that each light color can be reflected to have a dark counterpart. And in this example, it's just the slate family, but all the families apply to this because they have the same lightness values. So if slate-50 was the color of text and slate-1000 was the color of the background, the inverse has to be true. If you remember that from the beginning, if we have black and white and the contrast ratio is 21:1, the inverse must be true. So if we have 50 as the text color, 1000 as the background, if we swap and we have 1000 as the text color and 50 as the background, they're going to achieve that same contrast ratio. So what does that actually mean? What can we do with that knowledge? If we have a screen that's designed like this, and it's using colors like feeds, we can reflect them, and still using the brand compliant colors, we just reflect them to have the lights go to darks and the darks go to lights. And I think you guys can see where I'm going with this one. You can have a customized, brand compliant, unique dark mode. One that your designers and company feel empowered to create and use accessibility as a positive, rather than a hindrance. So let's take a final look. And this is what we get. It's using our slates, it's using our blues, it's using our raspberries to create a brand compliant dark mode. So I wanna do one final recap before I leave today. If you take your color system and see what accessible color combinations you can achieve, you're gonna learn a lot about your company and learn a lot about color theory. If you use CIELab or the Lab space color, you can understand more about accessibility. And I want you guys to feel empowered to create beautiful systems where accessibility is seen as a guiding, positive force, rather than a hindrance. And last but not least, please have fun with colors. It was six months of work and I wouldn't have been able to do it if I wasn't having fun along the way. Every day was a new challenge where it was just a new experiment and trying to figure out, how can we break this? How can we make this better? So thank you guys so much for attending my talk. I was really excited to do this. This is my first conference ever. So Lianne if you wanna start fielding questions.

- Yes, absolutely. There's actually a lot of questions coming in.

- Okay.

- Everyone's very excited about what you were saying. I'm gonna start with the most popular one. Aaron mentioned that, "I'm geeking out. It seems like with all this data could be used as a product the ultimate color picking tool. Have you considered this as a future project?"

- Ultimate color picking tool. Well, okay. In this one, hopefully no one on CarMax is actually listening to this, but Lyft, if you go to Lyft, Lyft actually has a very good color picking tool. I don't know if they have the lightness values baked into their color picking tool, but what I do hope to do is that microsite that Reed created, I really hope to be able to get that into the hands of everybody here, is so I can at least understand if you pick a hue, you can understand, "All right, which colors are gonna work with white and black." So TBD on an actual tool that we can put out there, but I do encourage you use Lyft. You know, this is accessibility, it's doing the right thing, so I do wanna champion them. They did a great job of making it a great color picker tool.

- Here's another question. How do you deal with brand colors that are below the 4.5:1 contrast ratio when contrast with white?

- Ah, yeah. That's a very good question that we're still dealing with right now actually. I was just having a debate with another designer of like what happens with dark mode? Like, do you sacrifice brand integrity when you have dark mode? And what we're trying to figure out is like, well, brand has to be more than colors. Maybe it's typography, photography, aesthetics, quality. And so what we do is say, "Okay, well, when we're able to use the brand color correctly and pass accessibility, we do." And if we're not able to, well, we do not wanna sacrifice accessibility. That's the last thing that we wanna do. We wanna make sure that we're being inclusive first, regardless of the brand. So with that, I would just say use it when you're able to and when it is passing accessibility. And then when it isn't, just explain to leadership and say, "Hey, we wanna be a forward first thinking company, and if we do something like a yellow text on a white background, which is what we are running into, I cannot do that. As a designer, I cannot, you know, put yellow text on a white background or else that will violate accessibility."

- Well, that actually ties into the next question. What are the hardest color to make accessible?

- Okay, well, there is yellow, right? But there is also teal. You saw that probably at the beginning of the presentation, just like that teal color. Now, I have a a theory that's probably unfounded when it comes to like getting into green, but because of how the the cones in our eyes have evolved, we're able to see more shades of green. But because we're able to see more shades of green, that means that the contrast between them actually gets blurred a lot. And so you actually have a harder time dealing with green because it's very hard to find like a light green and a dark green that works together. So that was actually a hard one. That curve that you saw for blue, it was a radically different line for green actually. I wish I could show you guys that one. But it was a fun one to work with, it did end up working, but, you know, like you saw yellow, probably the hardest one.

- Okay. So we got a lot of them. So I'm gonna try to find the ones that are the most popular. How would we calculate color accessibility for backgrounds that use linear or gradients?

- Gradients. Okay. Okay. That was actually one thing... Let me see, am I able to go back in the presentation to show something?

- Yes.

- Okay, cool. 'Cause I actually do have a gradient that I showed off just briefly with this search results page. Actually that blue strip is a blue-600 going to blue-700. So-

- Oh.

- So as long as the two colors that are going from left to right pass with white, then you can at least ensure accessibility there. What would've been a problem I was doing a blue-500 which only passes with black to a blue-600 which only passes with white, then I would have to deal with the fact of like, "Okay, well then the white text has to be, you know, very, very far to the right and avoid the left-hand side." So, so long as the two colors in your gradient, you know, have like roughly the same lightness value, you should be okay.

- Thank you. If you ever needed to expand this color system to accommodate visualizations, how might you decide color steps for a charts like scatter plots and heat maps?

- Oh man. Oh I don't know. Yeah, this was like a passion project where like I tried to be like a scientist for a couple of six months. I don't know how to answer that, honestly. But honestly, the more science and math that we can put into a color system, the happier I would be.

- Do you have any tips about also incorporating color blind color contrast within your system?

- Yeah, so-

- Or is there.

- I think what we tried to do was so long as we're hitting that 4.5:1, we should be accounting for color blindness. So if we take those and we just distill them down to the grayscale, we should be able to account for like the red, blue, green color blindness.

- So we have a couple more questions here. How-

- One moment. Let me just let my dog out for a second. Ah, he's gonna start whining. All right.

- Yep, so actually we're getting a lot of people liking a question that's what's your dog's name? Okay. All right. So I went to Virginia Tech, I was a sophomore and he was a rescue dog, and when I rescued him, his name was Max, and I was like, "Whoa, no. I'm a nerd, he definitely needs a better name." And back then, my favorite superhero was Superman, so my dog's name is Kal-El which is Superman's Krypton name. 9 times out of 10 I just call him Kal or Goober. But yeah, he's been with me for about 12 years now. Yeah.

- Oh. All right. Here's another question. I have visited color wheel generating websites to get a sample of what colors work well together, but when I try to apply them to my site, it doesn't look right. Do you have any advice to keep in mind on how I should incorporate the colors into my designs?

- Yeah. Yeah. So one of them that I think we looked at was Adobe's Kuler where it kind of has like those palettes that are predefined or pre-made for you and says like, "Okay, use these colors well together." Well, here's the thing. With the lightness value, I would say that, you know, if you have colors that have the same lightness value, because of the idea of the perceptual lightness, they actually work really well together. So we pair something like the, and let me show you here, the blue-600 and the raspberry-600 together pretty well because we say, "All right, well, the lightness value is the same. They have the same look and feel so we want them together." So putting something like this on the screen, you know, if we say the blue-600 pill and the raspberry-600 dot, those work really well together. So rather than looking at the color wheel, if you are able to identify the lightness value, putting those colors together works really well. Now it's hard when it comes to the color theory. They definitely say like, "Avoid colors like orange and green next to each other." So for me, I would just say like, "Don't go crazy. You know, try to have at least, you know, three instances of the color on the screen." So like here, three instances of blue, three instances of raspberry. But 9 times out of 10, less is more when it comes to this.

- And along the same lines, we have a question. What comes first? Some design aesthetic and then do you... Sorry, what comes first? Some design aesthetics and then tweaking to a proper contrast or do you start with only the set of colors with sufficient contrast accessibility and why?

- Oh, that's a really good question. And luckily, this is where my naivete about accessibility at the beginning really helped out. So we had defined the lightness values and said, "All right. Every color family has to have these lightness values." And so we did, you know, blue, green, slate, and because I've been looking at them for so long, I was like, "All right, cool. This is it. This is done. They all have the same lightness values, we're putting into the system." But then, when I showed the brand manager and my boss, he was like, "Hold up. That green looks weird." And I was like, "What? No. It has the same lightness value." Like, it's fine. He's like, "No, no, no, no. Start tweaking it because there's definitely something strange about it." And I was like, "I don't know what you're seeing." But after I tweaked it, I was like, "Okay, I got what you were seeing." And we had kind of like a neon green at first, and so he had it tweaked where it's just like, "All right, we need to mute that green a little bit more." So I would say start with a general idea of like, "I want some blues, I want some reds, I want some greens." Apply accessibility and then go back, and start tweaking. And the best way to do that is actually putting it into something like an actual screen and working with those colors. Once you start working with them, then it's easier to go to a designer and say like, "Hey, hey, hey, I have actually taken all the new colors and applied them to one of your screens to show you what it could be." The aspect of like what it could be really helps with buy-in. So it's a going back and forth kind of a thing, it should never be waterfall. It should never be like, "Here are the new colors. Okay, goodbye." Always do a little bit of tweaking.

- Did you ever perform any A/B testing on the website with one color setup versus another?

- Yes. Yes, yes, yes, yes. Oh man, that was... Okay, so as you know, I'm a product designer now, used to be a visual assistant designer. That transition over was because I was like, "I need to do more testing. I wanna do more science kind of stuff and have data around it." So for these ones, what we did was put that light blue as a button background against the dark blue for a button background or just like the yellow as the button background. And we actually can see conversion rate change based on the different background colors. But here's the thing, it's really based on the context of the page. In some pages, users are gonna find that button no matter what. A good example would be like a checkout screen. They're gonna find that button regardless of the color. But for something like a search page, if the color is not evident with the button, they're just gonna bounce, they're just gonna leave. So it's actually really important to test per scenario. That's the one thing that I would encourage. Like there is probably no one answer that's gonna fit every criteria, but A/B testing is definitely a good way to get buy-in for a product organization. There are times where they just see visual as just like an art form, but it's not. It can be a science form and A/B testing really does help with that.

- Awesome. We have time for maybe one more question. What do you think about red and green used to indicates success, safety, and error?

- Oh man. Okay. So you can use green for success because that's the most logical thing. But for me, I really wanted to try to use blue as success because it was a little bit more calming. And you actually see from this screen, normally on a phone screen you have a notification dot that is red. But for me, red is error so we actually switched it to raspberry. So those preconceived notions of like what means success and what means error, and what might mean a notification, it can kind of get bent. Definitely. We have reserved our reds for destructive states or error states. I feel like that's like kind of like the cut and dry one of like, "Hey, if there's like a stop, a delete, a don't, definitely use red." But everything else can just be flexible based on like your brand ideology. You can look at like Target where like, unfortunately, like they can't use red as their success and their error so they probably have to use a green or something like that. But for us, where we have a little bit more flexibility, I would say, you know, try it out. But at least like from our perspective, yeah, red, destructive.

- All right. Thank you, James for this session. This is fantastic. And thank you for everyone for joining us. Enjoy the rest of axe-con

- All right. Thank you guys so much.