Fixing Your Color Contrast – Part 2

Last time we saw how to adjust the colors of text (or background) to meet the color contrast requirements for ADA compliant websites. Using the tool mentioned in that post, we examined various methods to select other colors for text. But what if you really like the text color with which you started and what if the contrast ratio was really close to the compliance rules. (For text that is 14 pt bold (~19 pixel) or 18 pt (~24 pixel) or large we need a contrast ratio of 3:1 or better and a contrast ratio of 4.5:1 for all smaller text.)

You could tweak the RGB value of the starting color. Of course, you should test each candidate color to see if the resulting contrast of the text with the background meets the appropriate requirement. Or you could use a tool like that found on the website: https://contrast-finder.tanaguru.com.

This is a free tool that you do not even have to download to use. It lets you change either your foreground or background colors to tweak their RGB values to a color that meets the selected contrast ratio. Let’s assume that I start from a page that had the following horizontal menu that used blue text on a black background.

Menu with blue text on a black background only has a 3.9:1 contrast ratio

Using the Colour Contrast Analyser from my last post, I see that the blue text on this nearly black background does not have sufficient color contrast. In fact, it is only 3.9:1. However, I still want to use blue text so I question whether I can change the blue to a lighter tint that will provide a better contrast ratio. By opening the Tanaguru Contrast Finder I begin by specifying the initial foreground (1) and background (2) colors via the hex values of both colors. Note, however, that you also can specify these colors by using the decimal values of the RGB colors.

Tanaguru Contrast Finder lets you easily set the foreground and background color from which you are beginning.

Next, I can select the minimum color contrast ratio you want (3). Because this text is smaller, I select 4.5 as shown below. For larger text, the color contrast ratio need only be 3:1. For level AAA, you could aim for a more restrictive 7:1 contrast ratio. I can also select whether I want to vary the foreground (text) color or the background color (4). Next, I can specify whether I want valid colors that are very close to the initial color or whether I might like to see a range of valid colors(5) because some other colors may actually look better. Finally, to have the tool find possible replacement colors, I click the Check and find contrast button (6)

You can then select the minimum contrast ratio, which color to vary, and whether you want to stay in the same color family or whether you would consider other colors.

The area labeled Old contrast(7) shows the original colors along with a sample of what the text looks like with those colors. It also calculates the color contrast ratio with five significant decimal places. Beneath that are possible replacements, New contrast(8), for the text color (since I specified text colors close to the original color). It also shows the detailed values for the text and background color as well as a sample for each combination of colors. Even if they look similar, the actual RGB values displayed in the leftmost column show that these really are different variations of blue. At the same time, the ratio column shows a calculated ratio of 4.5 or greater for each color combination.

The number of possible replacements varies based on the initial colors selected. Looking at the variations of blue text on a nearly black background, the text should appear more readable with the new color variations compared to the original blue text. However, I may still not be completely satisfied with the results. One option may be to change the background color. Another might be to set the Gimme (5) selection to a range of colors rather than colors close to the original. After clicking the Check and find contrast button again, the page refreshes with the following color combinations.

When you allow for any color, the actual ratios of the selected colors may greatly exceed the minimum you need.

As shown, many of these color combinations result in a contrast ratio significantly greater than the minimum of 4.5:1. Thus, I could select any of these new colors and meet the basic contrast ratio for normal vision people. However, the one negative aspect of this tool is that it does not calculate the contrast ratio as seen by the average color blind person with any of the three most common types of color blindness. It is for that reason, that I usually combine the use of the Tanaguru contrast analyzer with the Colour Contrast Analyser so that I can also see the contrast ratios for a color-blind person. As frequently happens, a good color contrast for normal vision people may still result in a poor color contrast for color blind people. Using the large color blocks (or the RGB or hex values of the colors), I can overlay the Colour Contrast Analyser on the Tanaguru page to see how well a color combination appears to each of the color-blind types.

Always check the colors you want to use not just for normal vision, but also for the three major color-blind vision types.

One other point that might be worth considering. While the Colour Contrast Analyser calculates the contrast ratio for each of the three main types of color blindness, the degree of color blindness can vary substantially. Therefore, while aiming for colors that meet the minimum color contrast ratio is a good starting point, you may want to target values that are at least 0.5 higher as in 5:1 and 3.5:1 rather than 4.5:1 and 3:1.

Next time, I will look at text within graphics.

Fixing Your Color Contrast – Part 1

Now that we covered how you can determine whether your text meets the color contrast ratio requirements (see last post), how can you adjust your text and background colors to fix any situations where the contrast ratio is not adequate? There are several ways. Let us begin with the easiest.

Black text on White background

Putting black text on a white background (or vice versa) is the easiest way to ensure that your text meets the color contrast ratio. In fact, without even testing the two colors, I can tell you that this combination yields the highest contrast ratio which is 27:1. No other color combinations will give you a color contrast ratio this high. While this combination may be fine for the majority of the content on your site, it does tend to be a bit boring. In fact, most websites typically average about four to five colors on a page. Of course, some of these color variations are due to link colors, but it is not uncommon to use different color combinations for page or even section headings as shown in the following image.

Black text on a white background or vice versa always meets contrast ratio requirements.

Note that in this image, most of the text is black on a white background. This is a common color choice for text on many web pages but by no means your only choice.

Colored Text on a Colored Background

Changing the background or text color to something other than white and black is perfectly acceptable provided that you check the color contrast ratio. In the header example of the prior image, the white text on the maroon background results in a 7.2:1 color contrast ratio. This contrast drops to a 6.1: 1 for people with Deuteranopia, but is still acceptable. However, had I used black text on the maroon background, the color contrast ratio for sighted people falls to 2.9:1 and is even lower for color blind groups.

This same ratio analysis applies even if you displayed the entire content text section as white text in a solid maroon block or if you had maroon text on a white background.

But what happens if neither the text or the background colors are white and black? You must still check the contrast ratios for the text against the background on which it is displayed. In the first line of the following figure, a light blue text is used on either a pale blue or green background. In this case, the contrast ratio for the text on the light blue background is only 2.4:1 and 1.3:1 for the text on the green background. This text color fails on both backgrounds.

The slightly darker blue text in the center example passes on the light blue background with a contrast ratio of 5.8:1 but fails on the green background with only a 4.0:1 ratio. I know what you may be thinking, ‘I can read the blue text on the green background just fine.’ That however is why you must use a tool to check the color contrast ratio and not just rely on whether you can read the text.

Example of different types of blue text on a light blue background and a green background

While I used a single image to show the effect of different text colors on different backgrounds, it is not unusually in a web page to have text that spans across a background with different colors creating a more complex challenge. In these cases, text that spans different color backgrounds such as in the last line of the above image must meet the contrast ratio requirements at all point along the text. This means that you must test the text color against each background color it appears over. In this case, the dark blue on the light blue and green backgrounds results in ratios of 10.8:1 and 7.5:1 respectively. Thus, we could use dark blue rather than black for text that appears over these two colors.

Using the Color Contrast Analyzer to Select a different color

The Colour Contrast Analyser 2.5.0 from The Paciello Group, a free download, has a dropdown box next to the color bar that appears for both the foreground and background colors. When opened, this dropdown displays a basic color grid of eight colors (hues) and seven tints of each color (tints add increasing amounts of white to a color). It also displays in the bottom left, a grid of 10 colors. The color box in the top left of this smaller grid is the currently selected color. The other four colors in the top row of this grid are tints of the selected color (tints add white). The second grid row shows five shades of the current color (shades add increasing amounts of black to a color).

Primary color selection dialog within Colour Contrast Analyser

It is often possible to choose one of the colors shown in this dialog to satisfy your color contrast requirement, often by choosing a color similar to one that you already wanted to use. However, this is one other option, the Others.. button. When you click this button the tool displays a grid of basic colors and custom colors. Custom colors are colors you have selected in the recent past so that you can reuse the color without having to write down the color’s hex code. More about that in a moment.

Secondary color dialog with basic color and any previously saved custom colors.

Click the Define Custom Colors button to see the complete spectrum of colors. After selecting a color, you can change the luminosity of that color by using the slider bar on the right side of the dialog.

Secondary color dialog with the custom color options displayed.

Notice that if you find a color that you like, you can save it for reuse by clicking the Add to Custom Colors button. This saves the current color to one of the 16 squares on the left side of the dialog.

There is one more way to select contrast compliant colors. I will reveal that method in my next post .

Finding your Color Contrast

If you read my last post, you have an idea about why color contrast is important, especially for those with color blindness. But color contrast is not just for the color blind. I have seen some poor color choices on various public websites. I will not embarrass them by naming them here. However, I will show you some of the text colors I have seen used on different background colors (Not all website pages use white as the background color). The following image shows just a few samples of some of the bad color choices I have seen.

Samples of text/background colors that have poor color contrast

How can you tell if the text color has poor contrast with the background color? Well, you could sit back so that your eyes are about 1 ½ feet from the monitor (about half a meter). Can you read the text without squinting? Do you feel the need to move your head closer to the screen to read the text? If you do, that might be a clue that your color choices for the text and background may not be good. Over time as you learn what colors work well together, you may be able to spot low contrast colors by just looking at the page. However, to get started there is a better, more scientific way to determine whether the color contrast is acceptable without limited your website to black text on a white background or vice versa. Even better, it will not cost you a thing.

(Note: when calculating contrast, it does not matter whether you are comparing the text color to the background or the background to the text color, the contrast ratio is the same.)

If you read the last post, you may remember that I referred to a tool called Colour Contrat Analyser 2.5.0 from The Paciello Group. It is a free download and extremely easy to use. All you need to do is to sample the colors for the background and foreground and it performs all the hard mathematics to calculate the color contrast ratio. For example, the color contrast ratio for the orange text on a white background in the upper left quadrant above is shown in this figure.

The Colour Contrast Analyser app shows that orange text on a white background does not meet the ADA standards.

The large text box in the middle right of this window shows you the RGB values for the foreground and the background. It then displays the color contrast ratio which is 1.9:1. But is this value good or bad? The four lines beneath the color contrast ratio tell you that the text for these colors failed at Level AA and Level AAA and it also failed for large text at Level AA and Level AAA. But what does that mean?

First, let me introduce you to the WCAG (Web Content Accessibility Guidelines). This document was published by the W3C (World Wide Web Consortium) and includes recommendations to make web content accessible to a wide range of people with disabilities including blindness, low vision, deafness, learning disabilities, cognitive limitations, limited movement, photosensitivity, and others. It has published guidelines for ADA compliance using three different levels: A, AA, and AAA. There is no color contrast test under Level A, so let us go directly to Level AA. At Level AA, the contrast between the foreground and background colors must be at least 3:1 for a bold text that is 14 pt. (about 18.67 pixels) or regular text that is at least 18 pt. (about 24 pixels) or larger. All other text must have a contrast ratio of at least 4.5:1. The text on most web pages falls into this latter size category and thus must have a 4.5:1 ratio. At Level AAA, the color contrast test is more restrictive with the contrast being at least 4.5:1 for 14 pt. bold text or 18 pt. text or larger and 7:1 for all other text.

(Bonus Info: White on white (or any color on the same color) has a ratio of 1:1 while White on black (or black on white) has a ratio of 27:1.)

(Bonus Info 2: Color contrast is an accessibility requirement for those with some vision, not the blind or anyone who uses a screen reader. Why? Because screen readers read the HTML on the page without any concern about the color. Therefore, a blind person can ‘read’ white on white text.)

So now you know what that the other text in the large text box is telling you. However, to make it even easier, you can see on the left side of the Colour Contrast Analyser examples of what the text looks like with the selected colors and either a green checkmark or a red ‘X’ to indicate pass or fail for those colors. There is a convenient check box at the bottom of this dialog that shows the contrast results for the three types of color blindness discussed in my last post.

The Colour Contrast Analyser also shows the ratios for people with color blindness.

In this case, the ratios are all remarkably similar and all very poor. Why do we need the results for color-blind people? I asked that question to a company that specializes in website accessibility, Monsido, and they told me that to be safe you really should make sure that your color contrast ratios meet at least Level AA for all vision types, not only for normal vision. Keep in mind that not all color contrast tester programs will provide the ratios for the different color blindness types. Therefore, be sure to choose a tool that supports calculating the ratios for all vision types.

Next time I will talk about ways you can ‘fix’ your color selection to meet the requirements of the WCAG.