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.

Author: sharepointmike

I am interested in all things scientific and technical, but especially SharePoint, SQL Server, Power BI, and ADA.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s