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.
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:
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.
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:
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:
- It can calculate if the contrast is high enough between two colors (so it does the same thing as CCA)
- 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.
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.
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.
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:
- Use a dark text on the yellow background
- Use a dark background with the yellow text
This is what I get:
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:
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.