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.

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.

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.

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.

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.

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.

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.

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.