If you are designing websites, apps, or digital graphics, then creating an accessible color palette is an absolute necessity. Accessibility is not just a buzzword, but a best practice that helps you maximize your efforts, look professional, and be inclusive.
Affiliate Disclosure: This post contains affiliate links, which means I may make a commission if you click on a link and make a purchase.
What is Accessibility?
Web accessibility is the practice of designing and developing websites, apps, or other tech products so that all web users, especially those with disabilities and those who use assistive technologies, can access information easily and equally.
When you adhere to accessibility standards, you are providing a better user experience to all of your visitors.
Where Do the Accessibility Standards Come From?
The standards of web accessibility are set by the World Wide Web Consortium aka the W3C, an organization founded by the guy who literally invented the internet, Tim Berners-Lee. The W3C sets the technical foundations that the entire internet is built upon.
Their guidelines for accessibility are known as the Web Content Accessibility Guidelines, or WCAG (pronounced wik-agg). Most designers aim to adhere to the WCAG 2.0 Standard or the 2.1 Standard, with guidance released in March 2021 for the 2.2 update. There are levels of standards that go into AA (double-A) or AAA (triple-A) compliance, with AAA guidelines being the higher standard.
Why Create an Accessible Color Palette?
Have you ever seen a graphic that was hard to read, or you couldn’t make out the words overlayed on an image? That is most likely because the contrast ratio between the colors was not high enough.
Contrast, as defined by the WCAG guidelines, is the perceived brightness between two colors. This is expressed as a ratio, for example white on white has a contrast ratio of 1:1.
You don’t want to spend a lot of time and effort designing your website or social media graphics, only for an important potential customer to not be able to read your main call to action, or miss out on your key brand messaging.
What Color Combos Should Meet the Contrast Standards?
When you create an accessible color palette, you equip yourself with the tools you need to maximize your design efforts. You will know what colors you can combine with other colors, and what color combinations in your palette should be avoided.
At a minimum for your digital color palette, the following color combos should pass WCAG standards:
- Body copy and background color
- Header text and background color
- Link text on background color
- Link text color on hover, and link text color if there is a change when it has been visited
- Any icons on the background color that are acting as links or buttons (i.e. a social icon)
Be mindful of buttons, tabs, accordions, or any other text in your design.
With color being an important part of brand identity and tone, you will want to make sure you have some accessible color combinations as early in your brand development process as possible.
How to Create an Accessible Color Palette From Scratch
There are many ways to do this, but I am going to show you what my process looks like. Color theory is not my strongest skill, so I will not dive into the mechanics of color or anything like that here.
Step 1: Define Your Brand
Brand color palettes are a visual way to supplement your brand’s story. You will want to make sure that they appeal to your target audience, and embody your brand’s aesthetic. Check out your competition, define your brand traits, and focus on your vibe to inform your palette.
Color palettes are usually anywhere from 3-6 colors.
For this example, I will use my color palette.
Step 2: Use Inspiration to Find Your Palette
When I was creating a color palette for one of my brands, I curated a Pinterest board with images I found that I felt were in line with my vision for the brand. After a few weeks of saving images, I looked for common colors and vibes, and created my palette from there.
Some great tools for generating multi-color palettes include:
Step 3: Check Your Palette for Contrast Issues
Now that you have a group of colors that you like, we are going to test the color combinations to find their color contrast ratio. All you will need is the hex codes for each color (ex. #ffffff).
My favorite tool for testing contrast is the Accessible Brand Colors tool. It was created by Use All Five, an LA-based design and technology studio. (This is not sponsored; just a tool I love!)
I always like to include a white (#ffffff) and a black (#000000) when I do my test if my main colors don’t include the color I will be using for body copy on my website. With this tool, you can test over 10 color combinations at once, but you will not want to usually include that many in your brand color palette.
Using the Acessible Brand Colors Tool
Put the hex codes into the tool and hit the “Get Started” button.
Then, your colors will appear in a neat chart.
The combinations will be assigned a compliance level:
- CheckmarkAAA – the combo passes AAA compliance standards at 7:1 contrast ratio
- CheckmarkAA – the combo passes AA compliance standards at the minimum 4.5:1 ratio
- CheckmarkAA18 – the combo will pass AA compliance standards if the combination is used on text larger than an 24 point font size.
- DNP – does not meet compliance standards, and this combination should not be used for body copy, header text, link text, button text, CTA text, etc.
If you are finding your colors are close to meeting the standards, then hover over one of your hex codes and select “Edit” on that color box. That will bring up a color selector, and you can play around with the color combo until you get it to meet the standards. If you have an existing palette that you want to tweak, this is a good way to do that as well.
If you find that you have some color combos that you absolutely love, but they don’t meet contrast ratios, you can still include them in your palette for solely decorative purposes.
Have You Created an Accessible Color Palette?
Tell me about your experience if you have! What tools do you like to use? What are your favorite accessible color combos? Let me know in the comments!
Leave a Reply