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.

The Wonderful World of Color

Color! Imagine a world without color! It would be like living back in the world of the 1950s when everything was black and white. At least on TV. Today people take color for granted. Well, most people do. But our eyes are unique sense organs that allow us to perceive the color of different objects as,…well as color. As a child, I often wondered what I would see if somehow my eyes would be exchanged with those of someone else. The ability to see through someone else’s eyes perhaps would solve my nearsightedness, but what else might it affect? I now know that eyes are made up of special light sensors called rods and cones. The rods are photoreceptors that interpret the intensity of light and are activated in low and dim light. That is how we see at night and keep from bumping into things, most of the time. The cones contain photopigments or color-detecting molecules that allow us to interpret color. There are three different types of cones, each with a different photopigment sensitivity: red, green, and blue. You might recognize these colors as the same three colors we use to define a colors on a website by using the RGB value of a color. In fact, these three colors make up all of the colors we can display on a computer screen, well over 16 million colors. Each of the three primary colors on a computer screen has a value from 0-255. For example, red is (255,0, 0), but so is (128,0,0). Each is just a different intensity of red. When there is enough light, the cones in your eye see an apple as red because the red photopigments are stimulated. However, when the light dims, the cones cannot respond and only the rods can detect light. Since they respond to the intensity of the light only, they see the apple in a shade of gray.

Why is this important to your website and why was my younger self interested in what I would see through someone else’s eyes? The answer is that sometimes the cones of a person’s eyes are not correctly formed. Some may even be absent. In these cases, a person will not see all colors the same way as you and I see them. Well, I don’t know about you, so the way I see them. It is these defects in the cones that result in color blindness. As with all things, the degree of color blindness is not as simple as being able to see some colors, but not others. In fact, there are degrees of color blindness depending upon the severity of the damage to the photoreceptors in the cones for each of the three colors. Thus, color blindness can range from hardly noticeable to severe.

There are three basic types of color blindness. The first is Deuteranopia. People with this type have difficulty telling the difference between red and green because the green cone receptors are not functioning correctly. This is the most common type of red-green color blindness. The degree to which these people can tell the difference between red and green varies. However, you can imagine in a world where traffic lights use red and green to indicate whether it is safe to drive through an intersection, this can make driving a challenge. Yet think about how often red and green are used on a website to indicate bad versus good values. This type of color blindness is genetic-based and affects 6% of the male population, but less than a half percent of the female population. Therefore, this condition is probably due to a defect in the X-chromosome which men have only one while women have two which reduces their risk.

The second is Protanopia. This type indicates a problem with the cones that perceive longer wavelengths like red. It is also a type of red-green color blindness, but this one affects the red cone receptors. This creates many of the same problems as a person with Deuteranopia. This defect affects about 1% of males and less than 0.025% of females. This means that the defect is probably related to the X-chromosome as well. This defect also poses a serious driving risk and will affect the perception of websites that use red and green to indicate bad and good data values in charts.

The third is Tritanopia. People with this condition have problems with cones that perceive shorter wavelength light like blue and therefore have difficulty discerning the difference between blue and green, purple and red, and yellow and pink. In fact, most colors for these people appear less bright. This defect is not sex-related like the other two. Fortunately, it is the rarest of the color blindness types.

So, why do we need to know this? Most websites typically use only 4-6 colors. If you were to pick 2 or more colors that fall into one of these color-blind types, users with that type may have difficulty viewing your site or perhaps understanding it. How can you know if your colors pose a problem? There are several tools available on the Internet. However, the one that I recommend is Colour Contrat Analyser 2.5.0 from The Paciello Group. There may be newer versions, but I like this one because it works fine and has a smaller footprint than some of the newer ones. Other benefits are that it is free and it is available for PC and Mac computers. We will talk more about this tool next time. However, today I want to show one of the alternate screens that many people who use the tool have may have never looked at. Under the Options dropdown menu is an option to show color contrast for color blindness. The image below shows the results for color blindness between red and green.

Example of Colour Contrast Analyser screen to see color blindness contrast ratios

If you have normal vision, you may think that the red text on the green background is perfectly legitimate. And based on the contrast ratio, it is. (Do not worry about the contrast ratio numbers for now. I cover that in the next post.) However, notice the contrast between the text and background for those with Deuteranopia, the most common type of color blindness. The text here is noticeable more difficult to read and this fact is reflected in the lower contrast ratio number.

So, in answer to my childhood question, if I could see through your eyes, I may not see the world the same way. Definitely, colors could be different. Next time I will explain how to use the contrast ratio numbers calculated by this tool to make sure your website colors are legible for everyone and thus ADA compliant.

Bonus Fact: Researchers into color blindness report that as many as 12% of females have four cone types rather than just three. They believe the extra cone type gives these individuals the ability to see as much as 100 times more colors than the rest of us. No wonder they say that their husbands have no eye for color fashion.

Images As Links and Alligators Too!

Images are also used as links and therefore must follow certain accessibility rules.

So far, our link discussions have focused on text links. However, another common way to implement links on a web page is with an image or photo. Sometimes the image simply looks like a button that the user might click like the one shown here.

Click image to open a web page with more ADA information.

Other times, the image might consist of anything from a corporate logo to a photograph which when clicked takes you to a page that tells you more about the photo or a related topic.

If the image contains text, such as this one, the text color contrast is also important. In a future post, I will cover color contrast in more detail. For now, I will just say that you should limit the text in images, and when you do include text, it must follow the same color contrast rules as ordinary content text and the text should be included in the alt text that screen readers access for the visually impaired.

In any case, using an image as a link is often as simple as adding the image to the page. Then with the image selected just as you would select content text to be used as the link text, insert a link. The actual method and keystrokes may vary depending on the text editing tool you are using, but the concept is essentially the same everywhere. The link wraps around the image. (Hint: If you are coding your page manually, it is easier to create the <a> link first. Then in place of the link text, place the <img> tag to reference the image you want to display.)

In addition, you need to know that while links only need a title attribute to describe their action, images have two attributes that must contain text, the title attribute and the alt attribute.

As with a text link, the title attribute consists of text that appears visually when the user hovers over the image. However, the alt attribute has an enhanced role.  It is used by search engines and screen readers for the visually impaired to describe the image.  In addition, when the image is used with a link, it must also describe what happens when you click on the image. You need to say where the link opens and what is being displayed. That is the fundamental difference from a text link.

Suppose the following image appeared on a webpage. Would you think that this was just a man holding a baby alligator? Would you know that the picture had a link that took the user to a separate page that explained more about baby alligators?

Man holding a live baby alligator.

Probably not. You may not even think to click on the image. Perhaps the title text should tell the user a bit more.  Suppose this photo included alt text telling the reader to click on the image to learn more about baby alligators in Florida.  You could duplicate the alt text as the title text so it would display visually helping even the visual visitors to your site.

Click here to display more information about baby alligators in a new frame.

(Yes, that is really me holding a live baby alligator compliments of the folks at Gatorland, Orlando, FL who had stopped by.)

The alternative would be to place text around the picture telling the user to click on it to see more information, but why not just put that in the title text?

Another type of image is one that contains multiple links. This image type is called an image map because you must map each area of the image to its own link information. The following corporate organization chart is one such image that might utilize an image map to provide more information to the user about each corporate position.

Click on the position to learn more about the person who holds that position.

Bio for President Mitch Healey Bio for Ms Andrea Jackson Bio for Ms Ann Li Bio for Mr. Johann Pleiski Bio for Ms. Scarlett Weir

For an image map, the <img> tag contains an attribute called: usemap. This attribute connects to a <map> tag that has one <area> tag for each separate clickable area. For the above image, there are five separate clickable areas, one for each position. The <area> tag contains attributes that define

    • the shape of the clickable area
    • the coordinates of that area
    • the URL that defines where the user will be taken when they click within the area
    • the title attribute
    • and alt attribute

You can even define a title and alt attribute for the overall image in the <img> tag that will apply if the user clicks or hovers outside of all the position boxes. While image maps can be created manually, it is best to use a tool to calculate the coordinates to build the <map> tag code block such as the one at Image Map Generator.

Remember that this organization chart is still an image made up of dots of color, and a blind person cannot read the labels on the individual blocks with a screen reader that only reads text created with text characters. Therefore, you must provide that information in the alt text of each area perhaps something like: ‘Open the Bio Page for the position of President held by Mitch Healey’. The title text might simply identify visually the box in the organization chart: ‘Bio for President Mitch Healey’.

My goal here is not to teach you how to create an image map. Many Internet references can do that including How To Create Multiple Links On A Single Image with Image Map. My point is that multiple links within an image map must have their own individual title and alt text strings just like individual images with links.

Before leaving today, I want to ask what is the difference between alt text and title text? When correctly implemented on the web platform, the alt text is used by search engines and for the visually impaired and should describe what the image is and where it takes the user when clicked. The title attribute appears when you hover over the hotspot of an image map or link. While the title text is not used by search engines or screen readers, it does help visual users to understand what you are trying to do.  For that reason, it is my opinion that it is not necessarily wrong to use similar alt and title text strings with images that have links if doing so makes your intent clearer to all site visitors.

See you later this week.

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”

Where Am I?

Plan your link destinations with the vision impaired in mind.

When you add a link to a page, you can control where the link’s content appears. By default, it replaces the content in the current tab/window that contains the link. In other words, you stay in the same place. However, the HTML <a>, or anchor tag, includes an attribute: target. This attribute allows you to open the new content in a different tab or a different window. It could even be a parent tab to the one in which the link appears. For most of us with no vision disabilities, that distinction may be obvious. However, for the vision impaired, especially the blind relying on a screen reader, jumping to another location could be a total mystery. The problem is this. If a vision-impaired person wants to return to the previous content after reading the new content, what do they do? Do they press the go-back arrow? That only works when the new content replaced the prior content. Do they click the close box in the upper right corner? That only works if you display the new content in a new window. What if the new content replaced a parent window/tab? Getting back to where they were can be frustrating. Continue reading “Where Am I?”