How We Created Accessible Brand Colors at Ethena
Updated: Jun 27
We recently transitioned our brand colors to meet WCAG standards, and we're passing on our tips and tricks for making the transition yourself.
At Ethena, we make compliance training for today’s teams. I'm very happy to report that “today’s teams” look like a wonderfully diverse group of people which is why our training (which helps you be a more ethical and inclusive coworker) needs to be able to be consumed by everyone. This includes people who are disabled, the largest minority group in the world. In fact, most of us will be part of this group at some point in our lives, so it’s important to consider this as a main use case in any product you design! We decided from the outset that accessibility was a core to our brand, and we think critically about how to make every element of Ethena as accessible as possible.
Here is how we made an accessible color palette that reflects our brand AND is easy to apply and use!
Why you should care:
During this process, we conducted a lot of research to determine the best way to create an accessible color palette that is easy to use. We are sharing our solution here in hopes that more teams can use this approach to increase accessibility in their product, too!
Some rules of the road:
Before we started picking colors, the design team aligned on a few principles:
We love bright, fun, colors, and we wanted freedom to use color in our designs. We didn't want a rigid palette with limited applications, and we didn’t want to create a lot of rules that we would inevitably break.
Our palette had to be accessible. Specifically, the colors we use have to meet or exceed with AA Web Content Accessibility Guidelines (WCAG) when applied to a product or layout. Even better if we could come up with some general rules to ensure color was always used in an accessible way. This would make us faster and bring accessibility considerations into our normal product workflow.
Where We Started:
Web Content Accessibility Guidelines (WCAG) specify specific contrast ratios for different levels of accessibility. This is an outdated view of our dashboard where some of our colors are not making the grade.
Unfortunately, our original color palette didn’t support either of those principles. Although we loved our current brand colors, the color palette was limited and difficult to apply in a way that met accessibility standards.
Unfortunately our current color palette was pretty limited and only 2/6 colors were AA WCAG compliant for use with white text (something we do a lot in our branding).
The design team also debated how and where we would apply color. In the product, we agreed that color needed to be used very carefully since it would be associated with things like errors, buttons and success notifications. We also use colors in charts and data visualizations where color tends to imply a certain meaning; for example, we use red to indicate when learners are behind on their learning and blue to indicate when they are caught up.
The marketing team, however, had much more varied and free use of color. They wanted to use specific color combinations to brand certain courses or indicate different sections in a sales deck. Away from the product, colors like green and red can simply mark a new chapter in a deck, and we agreed that we didn’t need to be as prescriptive about usage in those instances.
With these rules in mind, we created a new palette with awesome accessibility considerations, designed for real-world usage!
The new, awesome colors:
We created ten shades of each color using a tool called Huetone, created by designer Alexy Ardov. We found this tool to be much more precise when picking colors. It also works with the design tokens plugin in Figma, making it really easy to pull into our working files!
As a rule, 600-1000 meet AA WCAG standards on white and 100-500 meet AA WCAG standards on black. This rule is helpful, but it does break down when you begin to apply colors on top of each other.
We knew that these colors would often not be used on pure white or black. Luckily, during our research, we discovered Amplitude’s fantastic blog post discussing their color system. They had the same issue we did (colors not always being used on black or white), and they created a very clever solution! Amplitude calculated each of their colors’ luminosity, a value that allows you to compare different colors by subtracting one luminosity from the other. By subtracting the luminosity of the two colors we use, the difference will easily tell us if the contrast meets accessibility standards.
A difference of . . .
361 ✅ WCAG AA large text
495 ✅ WCAG AA
640 ✅ WCAG AAA
You don’t have to be good at math to do this calculation! We created a calculator to help us determine the luminosity for each of our color swatches and compare two color values. You can give it a try here.
We had wanted a color palette that supported our brand, was accessible, and allowed us to design for our product and our marketing. The color palette we came up with supports our use case and taught us a lot about color in general.
Have you ever designed a color palette? Tell us about some of the challenges your team faced and how you solved them in the comments!
Want to join our team and be a part of this fascinating work? We are hiring positions in design, product and engineering. Apply online to join our team today!