Tips to Create an Accessible and Contrasted Color Palette
By: Stéphanie Walter
Tags: Color, UI, Design, Accessibility

Color contrast is something really important in Design. It will help users read your text and get a clear understanding of your content. Color contrast and color accessibility scares a lot of designers too. Some are afraid that color accessibility will limit the color palette they will be allowed to use and so their creativity. Some people think that color accessibility is “only for people with some sort of color blindness disease” so it does not concern their target audience. Let’s be clear from the start: color contrast will concern every one of you users. Everybody struggles at some point with issues linked to lack of contrast in interfaces and websites, color blind or not.

— Originally published at stephaniewalter.design, updated in March 2019 —

In this article, I will present you two tools and some quick tips to easily create an accessible color palette for your designs. I won’t lie to you: yes, you might not be able to use exactly all the colors you want. Or at least you will have to be careful with some of them. But that does not mean that you can’t get creative. After all, technical constraints are part of a designer’s job too.

Tools and resources to measure contrast.

To know if a color combination is accessible, we measure the contrast between the foreground color (usually the text but it could be icons) and the background color. If you want to understand how contrast is measured you might want to read Calculating Color Contrast. They are 4 levels of contrast: WCAG 2 AA Compliant for normal text and text above 18px and WCAG 2 AAA Compliant for normal text.

I will take a special interest in the first one: AA. Note that an AA accessibility grade can be mandatory sometimes when working with government sites for example.

For the tests I’m using the “Color Contrast Analyser”. This tool which is available for Windows and Mac. The tool is a standalone application that you have to launch. It provides a color picker I can use anywhere on my screen to test the contrast between a foreground and background color. If you prefer online tools you can use this one or this one.

Using the CCA color picker to get the color directly from my Photoshop picker

Testing the palette

I chose a palette based on a vibrant orange and used a complementary green one. I added an anthracite color and a yellow one. I admit I chose orange and yellow for the sake of the exercise since those two can be tricky sometimes when it comes to contrast. Yet, you can still build an accessible website with yellow, like, let’s say, mine 😀

→ Read the Portfolio Redesign Article

To test the color palette, I first write some text on them. I like to test “aiIlL1” since those letters and number are pretty close in some fonts. This helps me to get a quick look at the font readability at the same time. As I said before, color contrast is measured between the foreground and background so I duplicate the scheme with the colors inverted.

This is what my 1st draft of the color scheme looks like:

Testing the green

The first color is a dark green. To test it I launch the Colour Contrast Analyser software (I will call CCA for the rest of the article). I use the two color pickers to get the text color and the background one. The tool does contrast the testing.

CCA color picker can pick a color anywhere on the screen so you can use it in Photoshop, on the Photoshop color palette or even on a JPG final flattened file.