Must Text Color Contrast with the Background of an Image?

Text added to an image must also provide sufficient color contrast for those viewing your webpages visually.

In the last several posts, you have seen how color contrast of text on a webpage can be easily checked and corrected, but what if the text is part of a chart, image, or picture? I suppose this is just another one of those questions that can be answered with the phrase, “It depends.” By that I mean that it depends on whether the text in the image or chart is material to understanding the purpose of the image. Take the following image of a signpost with multiple signs pointing in different directions, each with a different curriculum area on it.

Signpost representing the many career paths available to a student

It should be obvious to you that some of the words cannot be read easily due to low color contrast. For example, the third sign from the top pointing left says, “MEDICAL”. White text on a yellow background has insufficient color contrast. Furthermore, this is not the only sign with text that may have low color contrast in this image. However, you might ask whether the words on the sign are pertinent to understanding the purpose of the image. This image represents the multiple paths a student can take upon enrolling in college. It does not matter what these paths are or even if all possible paths are represented. Rather, the image is symbolic of the many options available to a student. One might argue that in this case the words are not as important as the fact that each student can choose from many academic paths. In that case, the ability to read all the words may not be important.

On the other hand, suppose that a website had the following chart. The chart was created by someone with good color vision. They thought that having a variety of different color boxes would add interest to the chart. Unfortunately, the text for each color box uses a white font. In some boxes, such as the green ones, the first line is exceedingly difficult to read, even for someone with normal vision. The first text line in the blue and the orange boxes do not fare much better.

Using white text on multi-color boxes may not be readible

The point here is that if you have a graphics team that creates the images for your website, you may need to work with them to help them understand that color contrast concerns trump favorite colors, school colors, or even colors in a business logo. Sometimes, you can avoid this issue by displaying some text in a dark color on a light background and other text in a light color on a dark background as shown in the following figure.

Use different text colors to contrast with the background color, but be sure to check all combinations

Note here the use of black text on the yellow and orange boxes. If you were to open your color contrast testing software, you would also find that the white text on the lighter blue background in the center and lower right fail the color contrast test even for larger text. It may take a little work to get all the text in the image to contrast with the background, but the example below shows that it is possible to create an image that is much easier to read high good text contrast.

Example of a chart with text colors in different colored boxes that have good contrast ratios.

Finding text colors that work on different colored backgrounds is relatively easy. But what if you have text that overlays a photograph? The color contrast rule remains the same as for text on a solid background with the additional complication that the color contrast rule must be applied across the entire text. Just because the contrast may work for some letters, if it does not work for all of them, it is still a violation of the ADA color contrast rules. In the following example, the first text line uses black text against a blue sky which has some white clouds. In this case, black text provides sufficient contrast at every point in the entire line of text. However, the second line of text uses white text which obviously blends in with the clouds at several points in the line. While you might try to argue that you can still read enough of the text that your brain ‘fills-in’ any text that may disappear into the clouds. But that is not sufficient.

Text on a photograph must have sufficient contrast for each letter compared to the background

So how do you resolve the issue that the text color does not work for the entire text string? One way is to change the text color on a character-by-character basis to ensure adequate contrast as shown in the figure shown below. Where the image background is darker, white text appears and where the background gets lighter, the text color changes to black.

You could change the text color on a letter-by-letter basis to provide good color contrast

While this technique satisfies the letter of the ADA color contrast rule, the changing text colors can make it hard to read and probably should be avoided. So, what can you do then? The following image shows my preferred solution. Add a colored box in which to display the text. In this box, you can control the colors of both the text and background to meet the color contrast requirement. In this case, the background color of the box uses a darker shade of blue than the sky so that white text clearly stands out. Adding a very slight black shadow to the text enhances the contrast further.

Or you could place the text within a colored box on the image so you only have once background color to deal with

I could continue with many more examples of text on charts and images, but I hope that these examples provide a starting point for you to being looking at text on your images with an eye toward providing contrast here, not just in the pages text content. Remember, the goal is to ensure that everyone reading the web page can also read the text on the images.

Next time, I will continue talking about text on images, but will focus on the use of the alt property of the image. Alt text helps those visitors to your site who may use a screen reader to understand what the image is, its purpose, and any significant text on it.

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.

Don’t Change the Way I Look

Link formatting should be consistent across your entire website and should be controlled from a master CSS file.

Links are usually displayed in a different color to help them stand out visually from the ordinary text on a web page. Usually, they also appear underlined. Why do both? The contrast between the link and ordinary text colors may seem clear to most people without vision issues, but for those with color blindness, the contrast may not be adequate. Therefore, the underline provides an additional visual clue to identify the text as a link. In addition, the link color may change depending on the state the link is in. There can be as many as four different colors, one for each link state as shown in the following table. Continue reading “Don’t Change the Way I Look”