Dan Mall walks through building accessible color palettes that meet WCAG AA standards using Figma, Sip, and ColorSafe. He samples colors from photos, checks contrast ratios, and uses tools like randoma11y.com and ChatGPT to generate combinations that hit the required 4.5:1 contrast ratio.
At least 4.5 to 1 (4.5:1).
colorsafe.co (ColorSafe).
randoma11y.com.
Sip.
ChatGPT.
Here's my favorite tip for quickly creating beautiful and accessible color palettes. First, a quick primer on what I mean by an accessible color palette. When designing any digital interface, I try to follow the Web Content Accessibility Guidelines, which is a set of recommendations for making web content more accessible to the widest range of people. One of the criteria in those guidelines is to make it easy for users to see and hear content, including separating foreground from background. The way we do this in an interface is through contrast, and the Web Content Accessibility Guidelines suggest a contrast ratio of at least 4.5 to 1. What does that even mean? Well, let's take a look at what that means when we're actually designing in a design tool like Figma. So here we have an interface for a phone size screen and the graphics are all grayscale. I know a lot of people who start their designs in grayscale because it helps them figure out what proportions and relationships and hierarchies they want without any extra information to deal with like color or motion or anything like that. So this might be a good technique to use if you were starting with, say, a wireframe. So how would we begin adding color to this and then subsequently making sure that it is accessible? Well, since this headline says something like Once in a blue moon, the obvious direction would be to create a monochromatic design that has a bluish hue to it. So why don't we do that and we'll start from there. If we grab this, maybe I can pick a blue hue here. You know, maybe I will be inspired by the photo itself. So if I click on the photo, I'll bring the saturation back and the regular exposure of it. So maybe I can sample some colors from there. For the background of this, grab that. And for the text here, maybe we can grab that, that yellow or maybe a lighter blue or something like that. And you know, I think this looks nice, but there's no way for me to really tell if this is accessible or not. It looks good to me, to my eyes, but not everybody has the same eyes as me. People have different eyes and have different levels of vision than I do. And so how can I ensure that we're actually going to make this accessible? Well, I can use color combinations and color contrast that I know will pass the Web Content Accessibility Guidelines. So how would we do that? Instead, instead of just picking colors randomly and sampling and eyedropping, we can start with the base. So let's say we have this color here, this background color. I'm going to use a tool that I have called sip, and I'm going to sample this color. So it's going to copy that OA2836 to the canvas, and I'm going to open up a tool that I really like called colorsafe. The URL here is colorsafe co. And the way that it works is really easy. What you can do is you can paste in a background color. So that's on my clipboard. And I can say generate color palette. And the standard that I'm using is the Web Content Accessibility Guidelines, aa. I can also choose AAA here, but we'll use AA as the example. So I'll click Generate Color Palette, and check this out. It gives me all of the different colors that are accessible on top of that. So I could choose this one or this one. And you'll see up here, there's a preview of that actually changing. So I can go and grab any one of these colors. And now let's say I wanted to use the same shade or a yellow as that moonlight. I can go over to the yellow section, and I can grab one of these yellows. I get to preview it over here. I can kind of click around here and see what combinations are already passing. And even here, I see the current ratio, you'll see well over that 4.5 to 1 ratio that we needed for AA. So, you know, if this is a color that I wanted, I can go and grab this with my SIP tool. I'll go back in here and I'll change everything that's that color to this yellow. And now I know that it is accessible, so I can come in and change this. These menu icons, too. Yeah. Now I know that it's accessible. One of the things that I really like about that tool is it helps me to explore lots of different looks. So if I go back here and I want to do, like, a monochromatic thing, maybe I can come back in here and grab one of these blues, maybe some of the more subtler blues or gray blues, or maybe something like this. If I sample this, I can go back in here and change that yellow to this blue. And look at that. Just a different tone altogether. That makes me then want to go in and maybe retouch the photo or do things like that to make it stand out or to make it blend in more. So that's really cool. I really like this tool because it gives me those combinations that I know are gonna be accessible and pass that standard that I really want. The other thing that I'll show you in Here is it also will give me some ideas that maybe I wouldn't have thought of if I was just picking colors myself. So, you know, maybe I wouldn't have thought to put a red on a blue, but maybe I'll go over here to these reds and oranges, and, you know, maybe this pink or some of these shades of pink are things that I wouldn't have thought to do on my own. But maybe I'll grab this and bring that back in here in Figma, use that color. And hey, it's a totally different look than what I was going for in the first place. And that might give me some more ideas, too. So lots of different ways to use that tool. That's a really quick way that you can create accessible color palettes and know for sure that they are accessible, rather than guessing and checking and then plugging all of your values into a contrast checker. Oh, no, it failed. And coming back, that's a really great tool that I use all the time. Two more things that I'll share. I just came across this one, which is random a11y.com and if you don't want to do the guessing and checking, you're like, just give me some colors. You can just go in here and grab these hex codes and you can skip this one. And you can just go through some of these and find palettes that you like that you, again, that you know for sure are passing that contrast ratio because they've already been tested. So you can go in here and kind of use those color combinations as they're given to you with things that you like. So if you don't want to have to browse or anything, you just like, give me a color combination. I'll try it out, see if I like it. Maybe this joker color scheme here, you know, could be cool. That's something that you can use, too. Last thing is, you could even use Chat GPT for something like this. So in chatgpt, I put in, please give me a bunch of color combinations with hex codes that pass Web content accessibility guidelines 2.0 AA that aren't black or white, because I want different colors that match with each other. So here we go. It gave me blue and green, purple and yellow, red and blue, with all of the associated hex codes with those. So lots of really good ways that you can either browse and do have a little bit more fine control using tools like Color Safe or lots of other tools like random a11y.com and even using AI like ChatGPT to give you those color combinations. That's a really easy way that you can create accessible, beautiful colorbout. If there are tools that you use and that you love that help you create accessible, beautiful color palettes, I'd love for you to post those in the comments so that I could learn from those and try those out myself. Let me know in the comments if you like tips like this. If you do, I have a ton more to share, so let me know and I could post some of those. Thanks again for watching and more of these soon.
