Fixing Color Contrast Issues

One of the more common compliance issues with ADA (Americans with Disabilities Act) is also one of the easiest to fix. Color contrast in relation to the text on the background requires that the text be easy to read by all users who access your website visually. Color contrast measures the difference between the font color and the background color on which the font is placed. The rule is quite simple:

1. Text consisting of a font that is greater than 14 pt bold (19 px) or 18 pt normal (24 px) must have a 3:1 contrast ratio with the background on which the font is displayed.
2. All other smaller text must have a contrast ratio of 4.5:1.

How do you calculate the color contrast between your font text and its background? You don’t need to know how to perform the calculation. There is a free tool that you can download and keep open on your desktop at all times so you can check the color contrast of everything you create. It was created by The Paciello Group and can be downloaded from this URL: The Paciello Group website – Colour Contrast Analyser.

But if the color contrast is not sufficient, how do you fix it. Well, of course, you try randomly selecting different colors, shades, hues, or tints of the original color until this tool calculates a satisfactory contrast ratio. For example, suppose the Colour Contrast Analyser was looking at a light blue (Hex: #1AB4E7) font on a white background (see image below). The initial colour contrast ratio is 2.4:1 which is too low even if the text was larger. You might think that the light blue on white looks good to you. However, you are not everybody and some people have more difficulty with colors than others. Thus, the Americans with Disabilities Act had to create a set of rules that were testable and verifiable to ensure a contrast that most people would find the resulting text to be easy to read against the background.

One way to ‘fix’ the problem is the click the dropdown arrow to the right of the box that displays the color which opens a grid of different colors as well as several different tints (adding white) to the base color and shades (adding black) to the base color. Because we want to increase the color contrast, we would perhaps try some of the shades. In the image below, the mouse is pointing to the second shade in the second (‘Shades’) row which has a hex value of #1487AE.

However, even this shade of blue is not dark enough to contrast with the white background resulting in a value of 4.1:1. Good enough for larger text, but if the text is smaller, it still falls below the 4.5:1 requirement. We could go back to select the middle box (#0D5A74) which results in a great contrast of 7.7:1. However, it may be too dark. I am not going to go through the trial-and-error steps here of going back and forth between lighter tints and darker shades until you find one that just satisfies the 4.5:1 rule without deviating too much from your original color. Rather, I am going to introduce you to a second tool that can help you find a satisfactory color without all that trial and error.

The tool that I found is called the Tanaguru Contrast Finder. This tool, while free, is not something you need to download. Rather just go to the Tanaguru home page for the contrast finder.

Open the Tanaguru site to use the Contrast Finder tool

This tool’s home page lets start by specifying both the initial foreground (1) and background (2) colors. You can specify these colors either using the decimal values of the RBG color definition or you can enter the hex value of the color

Next, you can select the minimum colour contrast ratio you must meet (3). If the text is smaller, select 4.5 as shown below. For larger text, select 3.1

You can then select which color you want to change (4). In the case of regular text on the web page, you generally want to keep the page background color consistent across all of your pages. Therefore, I would change to the Edit the foreground color option.

You can also ask for colors that are very close to the initial color or a range of valid colors(4). I would in most cases go with a valid color very close to the initial color unless the contrast is too far from the ideal value in which case, I might ask for a range of valid colors to pick from.

When all the settings (1-4) are complete, click the Check and find contrast button (5). This is where the magic occurs.

After clicking the Check and find contrast button, the bottom half of the page is filled with possible colors that meet or exceed the color contrast you selected.

First, it shows the original foreground and background colors to give you a reference. To the right, there is a sample of the text so you can see what it would look like on a web page followed by the calculated contrast ratio.

Beneath the original colors, you see the possible colors the algorithm has selected. Even if they all look a little similar to you, the actual RGB values displayed in the leftmost column show that these really are different shades of blue. Note that the ratio column shows a calculated ratio of 4.5 or greater for each of the color combinations.

What I find instructive in training your eye to spot questionable color contrast text is to focus on the sample text from about 4-5 feet away. No matter how good your vision may be, you will often see a significant difference between the original colors and the selected colors, especially in this case.

Another example is the following image fragment from a web page I ran across. The first thing that my eye picked up was the green text on the white background. Indeed, this combination is only 2.5:1. However, not as obvious to most web page editors is that the red used in this table also has a low contrast to the white background. While it is better than the green, it still is only 4.0:1 which is below the required color contrast ratio of 4.5:1.

In fact, this shade of red is often picked out of a grid of colors as shown in the font color grid within the editor. As shown below, a pure red that also has the RGB value of (255,0,0) may seem at first to be a good choice because it may appear to be a bright red on a white background. Note, however, that bright colors often have poor contrast on a white background but may work fine on a dark background. Keep this in mind: the color selection dialogs in almost all cases have no idea what the background color will be. Therefore, it displays a range of colors, some of which may work with your background color, and many that will not. It is your responsibility to determine if the resulting color contrast with the background color is acceptable.

In this case, the darker red to the left (#C00000 or RGB(192,0,0) actually provides a good contrast with white resulting in a contrast ratio of 6.5:1. Don’t even get me started on orange on white or even worse, yellow text on white

When you have text on a colored background such as the image shown below, the situation is much more complex because you can tweak both the font color and the background color to achieve the desired contrast ratio. (Yes, even text in images must meet the color contrast rules stated previously.) In this image, the yellow on the blue text has a ratio of only 2.1:1, the white font on a blue background is a ratio of only 2.4:1, the blue text on beige is only 2.2:1, and the red-orange on beige is a mere 1.6:1. I’m not even going to get into the effect on the crispness of the text when the image size is changed as was done here.

In a case like this, if you have access to the original graphic and can change the colors before you post the image, you must do that. Even if the image comes from a third party as is probably the case in this image, you cannot pass responsibility back to the third-party and use the image anyway. Either they must supply an image that satisfies ADA guidelines, or it cannot be used on your site.

Furthermore, this image contains substantial text that the vision impaired using a screen reader will not be able to ‘read’. Therefore, the text must either appear in the alt-text of the image or if there is too much text there (generally alt-text should be less than 160 characters), then the text should be elsewhere on the page or on a separate page linked from the ‘longdesc’ field of the image. In this case, to ensure ADA compliance, I would probably not use the image and just enter the text manually in a content portlet for the page.

In general, when looking at your page, you must consider people with all types of accessibility challenges such as:

• Visitors with low color contrast vision.
• Visitors who use screen readers to read the page contents.
• Visitors who have low hearing ability should your page use sound or voice.
• Visitors who cannot use a mouse to navigate around the page.
• Visitors who are affected by flickering images from animated gifs.

Putting yourself ‘inside the heads’ of all of these different visitor types is a challenge, no doubt. However, it is what is required of an accessible web page.

One last point, all of the above applies not only to websites but to any content you make available to others within or outside of your organization because you just don’t know what challenges they may face.  It simply is the right thing to do.

Tale of the alt, title and longdesc Attributes

Most of you probably know that the alt attribute found in the <img> tag is used by screen readers to assist the visually impaired and blind. What is alt text in the first place? It is the text that appears in place of the image if the user turns off graphics or if the user is using a screen reader as is the case for blind or visually impaired visitors to your site.

Is alt text always needed? Well the answer to that question begins with the question whether the image adds to the understanding of the other content on the page. As an example, look at this image found at the top of a page describing an art course:

Or even the following image found in the page header of an elementary school.

Do either of these images add any additional understanding of the art class page or the elementary school page? Would a user who turned off graphics or was blind or visually impaired and could not see these images really understand the rest of the page any less if they never knew the images existed? I would argue that they would not miss a thing. Therefore, these images are considered to be a decorative element on their respective pages and the alt attribute should be set to the null string as in the following: (not the word null)

alt=""

In addition, the title attribute should not be included for decorative images while it usually has the same text as the alt attribute. Strictly speaking, the title attribute is what the page visitor sees when they hover over the image with their mouse while the alt attribute is used by many search engines to catalog the image. So, having both of these attributes set to the same text is really not a bad thing.

Consider the following image with no text. How does it support the other content on the page?

In this case, you might have the alt text:

alt="Student races the car he built in the Engineering Magnet program."

Does it matter that the car is blue, the grass is green, they are on an athletic track, or that the student is wearing a helmet? Depending on the purpose of the story, the alt text shown above may be enough when combined with other content on the page.

On the other hand, suppose the image contains text as in the following image:

While the image itself may not add to the understanding of the content on the page, the text must be included at a minimum in the alt attribute as in:

alt="Physical Education"

Note that the alt text must convey the same information as the text in the image. It is not necessary to say that it is the “Physical Education Banner” or “Physical Education Logo”. Adding words like “banner”, “logo”, “picture” or “image” is considered superfluous.

Some images have text that must be repeated in the alt attribute such as for the following image:

alt="A blue T-shirt that says: We're all in this together".

On the other hand, names on the sides of buildings, text in store windows, etc. if not pertinent to the content of the page do not have to be mentioned.

Sometimes the alt text can even be simplified. It is not always necessary to repeat the image text word for word as long as the meaning and intent are the same such as in the following image.

alt="Click image for information about distance learning for parents"

Also, it is acceptable to convert the text to upper and lower case, define TLA (three-letter acronyms) as long as the converted text does not change the fundamental message of the image text.

What if the image and the text on the image do add substantially to the understanding of the page or even the purpose of the image. Then that information must be provided to the visually impaired in some way. If the image description is short or if the text is short, as we saw above, then the alt text can provide that additional information easily. But what if it is not short? While there is no physical limit on the length of alt text, it is recommended that alt text is kept short, 125 characters or less. Is that really enough to describe the image and the text on it? Take a look at the following image.

Repeating all of this information in the alt attribute with only 125 characters or less would be impossible. This was the intended purpose of the longdesc attribute.

However, contrary to popular belief, the longdesc attribute is NOT a place for directly entering longer text, perhaps paragraphs or more in which to explain the image or the text on it. Rather, the longdesc defines a URL where the visitor can get more information about the image and/or the text on the image. While the status of the longdesc attribute is not entirely clear under HTML5, the main point is that it is not a duplicate of the alt attribute text nor is it a more detailed explanation of the image even though longdesc sounds like long description. It is a reference to a bookmark on the page or to the relative or absolute URL address of another page that describes the content and/or text in more detail.

In the above example, we might have the text of this information repeated elsewhere on the current page. If so, we can identify the content section by adding an id attribute inside any one of the following content tags that precede the content:

<p id="GraduationEventTimes">

<h3 id="GraduationEventTimes">

<div id="GraduationEventTimes">

(Note: Each id value can only appear once on a page. Otherwise, how would a link know which location to branch to. Make sense?)

Then in the longdesc attribute of the image, we would include the following:

longdesc="#GraduationEventTimes"

Note that the name assigned to the id attribute can contain only upper and lower case letters, no space, no numbers, and no special characters. When the id is referenced, it must begin with the ‘#’ sign to identify it as a bookmark name and not a page name.

It is also possible to reference another HTML page found at the same level as the page with the image. Suppose this page was given the name: “GraduationEventTimes.html” or “GraduationEventTimes.asp”. Then the longdesc attribute would be:

Longdesc="GraduationEventTimes.html"

Note the absence of the ‘#’ symbol, in this case, to identify the relative reference URL as another page on the same folder level as the current page.

You can also use relative URL references to traverse your folder structure, but that is a more advanced topic than what I wanted to cover here.

It is even possible to reference a page using an absolute reference that might exist on an entirely different site such as:

Longdesc="https://myschoolsite.edu/Seniors/GraduationEvents.hyml"

Relative and absolute references are actually the preferred way to handle charts and graphs in which the longdesc attribute points to a ‘hidden from menu’ page that describes the data used to create the charts and graphs and perhaps even includes the actual data tables used by them. Obviously, that much information would never fit within the limits of the alt attribute.

Anyway, I hope you learned something here about the alt, title, and longdesc attributes found in the <img> tag and to not use the longdesc attribute just to insert additional text describing the image or text in the image.