Every so often when implementing a new design or working on an existing project, one runs into situations where the color contrast between the background and foreground (read text copy) just feels wrong. It either feels that the colors simply clash or, that the content is illegible.
The Web Content Accessibility Guidelines(WCAG) defines a set of ratios at which point the contrast is sufficient to avoid common accessibility problems related to low, or poor contrast of web content and images.
But how does one test whether the contrast of your web page meets these guidelines?
That is where the Paciello Group's Colour Contrast Analyser comes in to save the day, so let's look at how you use this tool. Your first step is to head to the download page, the tool is available for both Windows and Mac, and install your own copy.
Once you have downloaded and installed the application, go ahead and launch it. The launch window will look something like this:
One option hidden away in the menus is the "Show color sliders" option. To turn this on press CMD+S(Ctrl+S on Windows), which should expose the color sliders underneath the foreground and background colors.
Clicking on one of the colors will open colors window, offering you an array of options for choosing different colors.
The options available to you are the color wheel, color sliders, color palettes, image palettes and crayons. You will also notice that as you select different colors, the contrast ratio, as well as the WCAG checks update to indicate the new values.
You will notice that to the right of the contrast ratio, there is an icon with the text "Show details".
Clicking on this icon will expand a panel textually describing you color choices, the results of the WCAG tests, as well as a short extract from the WCAG specification related to color contrast. The window also provides a "Copy results" button that allows you to easily copy all this information to you clipboard and share it with others as you choose.
While we are looking at out results, there is another tab that might not be immediately obvious. Next to the "Results" tab, you will see an inactive "button" labeled "Results for color blindness".
Clicking on the secondary button reveals a simulation of how the foreground and background color combination will be perceived under various color blindness visual conditions. The results show the following conditions:
- Protanopia - ~1% of males -
Those with this condition are unable to distinguish between colors in the green–yellow–red section of the spectrum.
- Deuteranopia - ~1% of males -
Those affected are again unable to distinguish between colors in the green–yellow–red section of the spectrum.
- Tritanopia - < 1% of males and females -
Those affected see short-wavelength colors (blue, indigo and a spectral violet) greenish and drastically dimmed, some of these colors even as black.
- General color blindness
While all of this is extremely useful, the real power of this tool comes in with a little obscure, easy to miss feature, the color picker. You will find this little magical tool at the bottom of the colors pop-up window.
Once you click on this little icon, your mouse cursor will turn into a well, color picker allowing you to select any color from your screen. Let's put this to use on a page I recently found to have link text that presented a real problem.
The page in question is the Firefox OS partners page on mozilla.org. The part of the page in question here is the sections with the light blue background. First click on the little phone icon on the left.
Then proceed by clicking on the "For operators & manufacturers" link. Here you will notice the yellow link text on the blue background. I believe you will agree that this is not good and hard to read. So, let's confirm that our visual inspection holds true by selecting the foreground and background colors using the color picker. You should end up with the following result.
From the above it is clear that our intuition was indeed correct. Switching to the results for color blindness, we can see that this clearly does not fair any better.
So, our next steps are clear. Find a foreground and background combination that works. Now, here is one of those places where real life steps in and makes things a little harder. As is often the case, certain aspects about a design is based on more than just simple choice but, is driven by brand guidelines, style guides and so forth. This example here then is no exception. So, in the process of finding a better foreground/background combination there is one limitation, the color of the background cannot change.
So that leaves us with only the foreground color to experiment with. As I indicated before, when we have the colors modal open and select different colors using the color wheel etc, the WCAG and color blindness results are updated in real time. Let's take advantage of this to do some exploratory testing.
Looking at the rest of the copy on the page, white seems to very legible on the blue background so, let's select white from the color palette.
And the results for color blindness.
The color blindness results actually does not look bad at all, pretty good in fact. The WCAG results is better than yellow, but not good enough, some more exploration is in order. Seeing that we have been on the light side of the spectrum, let's change things up and go to the complete opposite.
Pop open the colors modal again and this time, select black from the colors palette. You can of course also just type in the hex color value
#000000. Your results should be as below.
And the color blindness results.
Alrighty then, black seems to be the winner. Although, looking at the color blindness results, I wonder whether white might not be a better option even though black passes more of the WCAG tests. Especially Protanopia and Tritanopia is very hard to read with black on blue. To be honest, the background color here is the real problem and presents a challenge.
Often a challenge is best "won" by compromise and, in this case, I feel like a compromise is what is called for. I guess there is no absolutely right or absolutely wrong choice to make here but, if I change the color of the links to black using dev tools, I have to admit that the legibility does not get much better for me, compared with the yellow from before.
In fact, white is clearly much more legible in this scenario.
There is one thing we do lose though, the clear distinction between body copy and links. I feel like this is a compromise from the other side of the argument that needs to be made. Adding the guillemet icon [»] at the end of lines that are link text, returns some of the distinction we had before. In the end I feel that this is a win/win situation for our end users.
In the end, I am glad that we have great tools such as the colour contrast analyzer to assist us when making color choices, and helps us make more conscious decisions when choosing the colors we use in our web experiences.