Tips to Create an Accessible and Contrasted Color Palette

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

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.

— Updated on March 3 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.

CCA color picker

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:

Initial color palette

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.

Testing the green

For this test, I’m interested in the AA values. Good news, my green passes the test so I can use it as is. Note that it failed the AAA test, but for most sites AA test is enough.

Testing the orange: when it starts to get tricky

The second color I want to test is the orange. If I want to be able to write some white text on orange background (and vis versa), I have to make sure that the contrast between the orange and the white is high enough. Here is the test:

Testing the Orange

As you can see, this color would pass the AA test for large text, but not for normal ones. This means that if I want to write white text on orange (or orange text on a white background), the text has to be at least 18 points or 14 points and be in bold. Yes it’s strange, but the unit is actually the point so you’ll have to convert it in pixels for your tests.

I want to use my orange for smaller texts as well so I will have to find a better color. Here is when I’m going to use my second tool: Tanaguru Contrast-Finder

Tanaguru Contrast-Finder to the rescue

Tanaguru Contrast-Finder is an online tool that will do two things:

  1. It can calculate if the contrast is high enough between two colors (so it does the same thing as CCA)
  2. It can propose color alternatives if my color does not pass the test.

I give my colors to the tool. If I want to keep my current orange as a background color, I must use a dark brown/black the text. But I’m not super happy with the halloween look. Also I could not use the orange on a white background, I’m not super happy with that either.

Screenshot of tanaguru with orange and white contraast

Since I’d rather get light text than dark one, I have a second option: I can ask the tool to find me a better background orange color. To do so I change the dropdown “Component to edit” to “Edit the background color” and check the second radio “valid colors and much closed to initial color”. The tool now gives me some variation of my initial orange that have a high enough contrast. I choose the second one and you can see that this time, it passes the AA test.

screenshot of accessible tanaguru background colors

 The third dark color passes the test so I won’t have to tweak it, so let’s go straight to the last one, the yellow case.

To the yellow tricky part

Yellow is a really tricky color when it comes to contrast. As you can see my current yellow color on a white background and white text on my yellow color fails all tests, even the large text one.

I could try again the “let’s find a yellow background close to the original one”. Unfortunately the closest thing I can get if I really want to use yellow with white is an awful brownish color.

Accessible variation of the yellow chosen by tanaguru is an ugly dark brown

So if I want to keep this particular yellow color I will have to change the color of the text. The tool proposes me different shades of gray. So to use this yellow on a site with a high enough contrast I will have to:

  1. Use a dark text on the yellow background
  2. Use a dark background with the yellow text

This is what I get:

Yellow with dark text

If I take a closer look, there’s something odd with the last color: it does not fit very well in the whole scheme. Even if the tool gave me an accessible dark gray, I’m still the designer so I can still tweak this little bit more to harmonize the colors.

My color scheme already had a dark variation of gray, why not use this one with the yellow as well? In this case, the gray I’ve used for the previous color passes the AA test. Hooray, I’ll be able to use it with my yellow.

This is my final color palette, with the yellow passing the AA test:

Final Accessible palette 

Conclusion

Building an accessible color palette is not as hard as it looks like, especially with the right tools. Also accessible color themes do not have to be ugly or kill your creativity. I had to do some little tweaking with the yellow color and I got an orange one pretty close to original one, but I’m not far away from my original color palette.

Of course it might not be this simple if you are working with a client that has already a strong brand identity with colors you won’t be able to chance. But educating clients is also part of the job, and making them aware of all this little details will help them launch a better website as well.

Are you looking for a UX or UI designer, for a site or mobile application? Do you want me to give a talk at your conference, or simply want to know more about me? You can take a look at my portfolio and contact me.

3 thoughts on “Tips to Create an Accessible and Contrasted Color Palette

  1. For px, you can use http://accessible-colors.com/, which also lets you select your font weight -which means you don’t have to know what the tools means by “large text”. Now the tricky thing is the wcag2.1 rules about contrast, that don’t only regard font (that has size and weight), but also the contrast of the visible focus on tab for instance – which can be a box border.

  2. Great article! It’s nice to have feedback about a real project!

    There is another solution which you didn’t talk about, and which most designers haven’t heard of.

    Indeed, there are times when the client’s branding contains insufficient color contrasts, but you cannot change the colors at all, even to edit them slightly.

    In that case, in order to respect the branding while keeping an AA accessibility level, an interesting solution is to offer a style switcher on your website, which will let users switch to stronger contrasts if needed.

    For those interested, you can read more about this WCAG technique here: https://www.w3.org/TR/WCAG-TECHS/C29.html

    A great solution in my opinion, when you have no other choice – which happens a lot, especially when you didn’t create your client’s branding and color scheme yourself.