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.

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.

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

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.

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.

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 .