Tools and tips to create accessible color palettes

A note to the reader

I started writing this newsletter before the President of the United States signed an Executive Order (EO) to eliminate diversity, equity, inclusion, and accessibility (DEIA) work across the federal government.? I decided to continue writing this newsletter article for three reasons;

• my audience is not solely US based;
• people will continue to need accessible data products regardless of the EO. If you wear readers and forget where you put them sometimes and try to look at your computer screen and can’t really make out the text because it’s small (not that I've done this, of course ??), you have a need for an accessible product. Maybe you’re just bleary-eyed because you’ve been trying to debug code for the last five hours of the work day. You too may need an accessible product; and??
• there are still people and organizations that value inclusivity and accessibility and they could use this information.?

While it feels pretty crappy (I'm keeping it real with you) to have something you advocate for be cut back or eliminated as if it doesn’t matter, I’m trying to practice what I’m learning from the new Mel Robbins’ new book,The Let Them Theory. Let them have their opinions.? I can still have mine.? When it comes to accessibility, I will share what I know for the people who want to know.?

And if you’re new here, welcome! I talk about all kinds of topics that help the everyday analyst and today, it’s about creating accessible color palettes.

With gratitude,

Emily

I’ve recently been asked about the tools I use to create an accessible color palette, so I thought I would share them with the rest of the world.?

First, we’ll start with the premise that I know which colors that I want for my palette.? For this example, I’ll use a palette that I’ve used for one of my brands.? The color chips and hex codes are below.?

Two questions are important to ask;

1. Is this palette accessible?
2. How can we use it in an accessible way?

Checking color palette accessibility

I’ve previously used the Colour Contrast Matrix Generator tool from Lisa Gaudette, which has been super helpful in helping me select colors for my palettes. The color contrast results for my palette aren’t so good.?

Before I dive into how we can use these colors to be accessible, I also want to share a new tool I learned about on LinkedIn; Paletta.?

Thanks to Frank Elavsky and ?ystein Moseng for sharing this new tool, which I have really enjoyed using. This tool is part of HighCharts.?

Paletta is a fantastic color contrast tool that helps you understand whether the contrasts are sufficient for WCAG guidelines.? I think it’s slick and wish I designed it myself! Kudos Marvin19 on Github (I can’t find the LI post where she shares the project).? Here’s the link to the READ-ME file on Github. One important note is that it’s a work in progress, so I (and the tool developer) advise double-checking the results.? That’s a good use case for Lisa Gaudette’s tool (or vice versa).?

My thought process?

I have to tell you, I really love the colors in this palette. It includes bright pink and if you’ve been a friend or a reader of mine since way back in the day (aka 2013), you know that I love a pop of pink. I also love alliteration, so I’m going to use Paletta (does my pink pop using Paletta?) as my reference tool to check my palette.

First an important note. I set the contrast ratio to Level A 3:1 for Paletta because in the data space, I would use these colors for the data elements in a data visualization and the requirement for contrast for non-text elements and for large text elements is 3:1.??

1. What colors should I include in my palette?

? Good to include

Light pink (#fff5f6) works well as a color to pair with other colors because it well exceeds the 4.5:1 contrast ratio required for regular text in Level AA compliance.?

?? Use with caution

Bright pink (#b91568) and off-black (#111111) are colors that can be used with caution as two of the four proposed colors have at least a 3:1 contrast ratio.?

??Consider other colors

The medium pink (which I would call raspberry or #b91568) and deep pink (which some might call maroon or #5d0b34) only pair well with one color; light pink.??

The issue now is that we don’t really have a complete palette. We can only use three colors together and how many visualizations just have three data elements? Not a lot.?

Next steps

Now it becomes a question of what colors can we add to get to at least seven and at most nine?

I went through a bit of testing through moving my color picker up, down, and around my base colors.? I kept colors that worked with at least three other colors. Why three?? Because I charted a few colors initially and I knew they could be used together, especially when used intentionally.?

I’ve charted a couple of examples below.? The first chart includes light pink and two darker pinks (raspberry and maroon). In this example, only the light pink adjacent to the raspberry color has sufficient contrast though the raspberry color adjacent to the maroon does not have sufficient contrast (at least 3:1).

I also tested the bright pink, light pink, and dark pink to see if that had sufficient contrast when intentionally placed.? For the data elements that are adjacent to each other, the answer is yes! The downside with the light pink is that it has such a low contrast against the white background that it wouldn’t be visible to people with low vision.??

I also used the tried and true dataviz test:

Get it right in black and white (as a first step)

If I convert the images from above into black and white, you should notice that the second image is easier to distinguish each segment of the bar (though it’s not great as is because light pink is so close to the white background).?

Because I’m the one using this palette, I know that I’ll be checking the color contrast ratios and using the colors in a specific way to further the accessibility of my work.??

After a few iterations, I decide on a nine color palette consisting of the colors below.The nine colors (eight if take out the off-black (#111111), gives me some flexibility in how I use these colors.??

For me, I’m satisfied with this palette.?There is one question or important point to make. I'm using this palette so I know which colors to use. If I were sharing this palette with others, I would definitely need to provide more guidance on how to use this palette, as I could not use the first three colors together as they are. Recall that you can't use color alone (WCAG Guideline 1.4.3), so if I needed to use those three colors, I would need to use a pattern or some other double encoding to ensure that the readers could recognize and understand the data.

What about corporate, Em?

It’s super easy to design a palette for one person. It’s a lot harder to design a palette for a variety of people. At a high-level, make it as frictionless as possible. This means that you could create custom palettes, templates, easy to understand guidance, etc. to reduce the friction. I’ll delve into this topic in another newsletter.?

Quick notes

• Thanks for bearing with me as I figure out pacing. I love to write and have so many topics I want to share with you. I just need to do it in a sustainable way.
• My goal is to do more networking this year (I’ll make it SMART later) and am prioritizing in-person networking.? If you’re in the Baltimore-DC area and would like to meet up, send me a message!
• I would love to make to the Moxy Foundation's 2025 Fundraising Gala. If you love dressing up, doing good, or both!, consider attending! Funds go towards the SisTech conference, which shares experiences and knowledge from women all across the tech field, She Talks Data, and more. Visit https://www.moxyfoundation.org/events-1/2025-fundraising-gala to learn more.