Tips to Create an Accessible and Contrasted Color Palette

Tips to Create an Accessible Color Palette

Cet article est également disponible en Français : fr_FR fr_FR

Color contrast is something really important in Web Design:  it will help users read your text and get a clear understanding of your content. Color contrast and colors 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 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 concerns every one of us as some point. Who has never used her iPhone in the plain sun and complained that she could not read anything? Who has not dreamt of working on the terrace of a café only to find out that they could not see anything on the screen? You get the point: everybody struggles at some point with problems due to lack of contrast, color blind or not.

In this article, I will show 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 take some caution with some. But that does not mean you can’t get creative. After all, technical constraints are part of a designer’s job too.

Tools and resources to measure contrast.

Color contrast is measured between the foreground 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. We will be interested 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” 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.

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 color 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.

To test the colors I put some text on them. I like to test “aiIlL1” since those letters and number are pretty close. 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 foreground and background so I duplicate the scheme with the color inversed.

This is what my color scheme looks like when I start:

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). All I need to do is to use the two color pickers to get the foreground color and the background one . The tool does the testing. The 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, and good news, my green passes the test so I can use it as is. Note that it fails the AAA test, but for most sites the AA test is enough.  For the example I tested both green on white and white on green variation, but testing only one is enough since the contrast will work in both ways.

Testing the orange: when it starts to get tricky

The second color I want to test is the orange one. If I want to be able to write some text in orange, 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.

When the contrast is not high enough, the tool will by default edit the foreground color and give you some alternative foreground colors with a high enough contrast. If I want to keep my current orange as a background color, I would have to write the text using a dark brown or black and also would only be able to write orange text on a dark background.

 Orange with dark text

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.

Light text on orange

 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.

Ugly brownish yellow

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 seemed, 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.

Looking for a Web or UI designer, for a site or mobile application ? Looking for a logo designer, or simple want to know more about me ? You can take a look at my portfolio and contact me.

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

    • Glad you like it, your Tanaguru Contrast-Finder tool has become part of my workflow so I’m happy to spread the word.
      PS : it will be translated soon in French if you are interested I’ll share the link.

  1. Pingback: Creating a color palette with accessibility in mind | Blog Tanaguru

  2. L’utilisation de Tanaguru Contrast-Finder est vraiment bien expliqué et comprise au travers de cet article !
    Cependant, l’utilisation du colour contrast analyser n’est pas très clair, Contrast-Finder vous certifie si le contrast est bien valide. Pourquoi dans ce cas précis utiliser ce deuxième outil ? Vous manque t-il une fonctionnalité sur Tanaguru Contrast-Finder ?

    • J’aurai préféré continuer cette conversation en anglais puisqu’il s’agit de la partie anglophone du blog, mais soit.
      CCA permet de tester le contraste sur le bureau directement dans un outil comme Photoshop ou sur le bureau de Windows grâce à a pipette : “All I need to do is to use the color picker to get the foreground color and the background one . The tool does the testing. The 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.” Je vais peut-être voir pour reformuler du coup si c’est pas compréhensible.
      Tanaguru est un outil basé sur le web qui ne peut pas interagir avec mon Photoshop et copier/coller une couleur depuis Photoshop est particulièrement pénible, je préfère donc une pipette qui me permet de faire le test directement. J’ouvre Tanaguru que si la couleur choisie ne passe pas le test de CCA :)

  3. Pingback: Créer facilement une palette de couleurs accessibles | Webdesign-portfolio

  4. A great proof that constraints make creativity.

    If you wonder about the equivalent to the thresholds in points in a screen-usage compatible unit, you can consider the 18-point threshold to be equivalent to 150% of the default font size (1.5rem) and the 14-point threshold (for bold text) to 120% of the default font size (1.2rem).

    Finally, if you have to design a link which is only based on colour, do not forget to check the contrast between the link colour and the neighbouring text colour, in which case the constrast ratio must be at least 3:1.

  5. Very nice piece. It’s sometimes tricky to get across contrast for beginners or people learning graphic design.
    Going further, I’d add something on colorblindness tests that can be simulated in Photoshop or using online tools.

    • That does look very promising, thanks a lot for sharing !!
      A great thing would be to be able to copy/paste with the # since it’s what many color picker do

  6. Pingback: Round Up: SVG, ARIA, GAAD, WP, Ai Squared | Web Axe

  7. Pingback: Créer facilement une palette de couleurs accessibles - Stéphanie Walter : Design web et mobile, UX et UI design

  8. Pingback: La semaine en pixels – 4 avril 2014 - Stéphanie Walter : Design web et mobile, UX et UI design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment validation by @