Can I Get Your Attention?

How you emphasize text is important within your web content.

On a typical web page, what do you notice first? Probably the title of the page if it has one. Next, your eyes might be drawn to any images on the page. Finally, if you are still interested in the page, you might begin to look at the text, perhaps even reading the first paragraph or two to see if it is meaningful to you. Actually, most news sites know this and put the most sensational statements either as part of the title or within the first paragraph. They typically only clarify those statements and put them in context, if they do at all, further down in the article.

But what if your page does not have sensational statements and you just need to emphasize a sentence or even a few words. What is the most effective way to do that? Unfortunately, for many beginner web content creators, their first thought might be to underline the text that they feel is important. That, however, can be visually misleading. Why? Most web site visitors immediately assume that any underlined text represents a link to somewhere else in the document, another page, or even another site. You cannot assume that if your underlined text is a different color that the font color used by links on the page that the user will know that you are just emphasizing the text and not making it a link. For people with low color vision, they may not even notice the difference so why tempt fate? Just keep underlined text for links, not to emphasize a point.

If the text on the page is broken into topics with a header at the beginning of each topic, it is equally wrong to underline the header text for the same reasons as stated above. I will talk about headers in a future post. They can be very useful on pages with a large amount of text that can easily be divided into topics.

One way some web content creators emphasize text is to use a different font color without the underline. While that may be tempting, there is an ADA (Americans with Disabilities Act) guideline that states that color alone should never be used to emphasize text or imply meaning. This echoes again the concern for people with low color vision. For example, the following line may seem okay to most.

If you experience pain in your upper arms or chest, call 911 immediately.

First, the contrast between the font color of the last three words and the rest of the sentence may not be obvious to all readers of your site. The color contrast between the black text and the maroon text is only 2.6:1.

Preferred recommendations in this case combines the color with a change in the font style such as making the text bold or italic. You can also use a different font family and change the font size. Changing the font color to a shade that better contrasts with the rest of the text works as well. Examples of better ways to display the above line might be one of the following.

If you experience pain in your upper arms or chest, call 911 immediately.

If you experience pain in your upper arms or chest, call 911 immediately.

If you experience pain in your upper arms or chest, call 911 immediately.

Note that if you change the font color to emphasize text as in the last example above, the font color of the emphasize text must contrast with the rest of the text. In this example the contrast between the new shade of red and the black text is a healthy 4.8:1 and the contrast to the background is 4.3:1 but by increasing the font size to 14 pt. bold, this still surpasses the 3:1 color contrast requirement of ADA.

One word of warning when using a color, do not use a color that is the same or close to the color used for links within the text to prevent confusion. In no case should you underline text to emphasize it even if you change the font style or font size.

Another alternative for emphasis that can sometimes work is to reverse the color to emphasized text such as:

If you experience pain in your upper arms or chest, call 911 immediately.

If you experience pain in your upper arms or chest, call 911 immediately.

These two examples simply turn the text to white while using a black or maroon background color. Both options help the important text stand out from the rest of the page content.

In summary, emphasized text should be reserved for the most important information only. You might use more than one emphasis style if you have different levels of emphasis. However, within the same site, be consistent with the methods you use to emphasize important text. Do not use different emphasis styles on different pages. That would be as bad as using different font families, font styles, or font sizes on different pages. At all times, all pages within your site should look like they belong together.

Site Navigation – One Type Does Not Fit All

What type of site navigation should your website have to make it easy for visitors to find the information they are looking for?

Most website creators have to think about how users will navigate their site. I say most and not all because if you have a very simple site that consists of just a single page, you really do not need navigation unless your page has multiple topics and requires the user to scroll to see them all. (Then you might want to use section headers and a Table of Contents to allow the user to quickly jump to the topic in which they are interested. More on headers at another time.)

Suppose that your website has only a few pages. Besides the home page, you might have an About Me/Contact Us page and two or three other pages. An example taken from my site has the following menu across the top of the page.

Example of a horizontal static menu.

This menu consists of only four topics. The selected topic is displayed as bold text while the others are regular text and more of a grey than a black font color. To go to one of the other pages, you need only click on the one you want to go to. In addition to pages on your site, a menu item can also link to another site. In my case, the My Old School Site is just a link to a site I supported in a previous life.

Usually, horizontal menus appear across the top of your website. However, they can also appear across the bottom of the page. The probably with putting it on the bottom of the page is that if the user must scroll to see the menu options, they may not even both and go to a different site instead.

It is also reasonable to create a menu that appears vertically on the left side of the page. (Left because we read left to right.) This orientation is useful when you have more links that can fit horizontally across the top of the page. You never want a horizontal menu to wrap around to a second line. One reason for this is related to the ADA concern that clickable links must have sufficient vertical space between them so that visitors with issues pointing and clicking their mouse are less likely to click the wrong link. If you have a lot of menu links or if the number of links can vary by the user or by the user’s action, placing them vertically along the left side of the page with plenty of space between each line is a common alternative. This menu method is used by Outlook, Google Mail, and many others to display your mail folders since you can add or remove folders at any time and you can have dozens of individual folders.

A typical vertical style menu.

Another way around a large horizontal menu is to have as the last button on the right an option to display more menu items. The three dots in a horizontal line shown below or three stacked horizontal lines (known as a hamburger button) show a typical vertically oriented dropdown menu box.

Use of a button on the right side of a horizontal menu to display additional menu items as a dropdown menu.

But what if you have a series of pages that are related to the main topic rather than being separate topics in themselves. In this case, a dropdown menu from an option in a horizontal menu like the one shown above can in theory support any number of items. However, as a practical standard, you do not want the dropdown to have so many items that the user would have to scroll vertically to see all of them. Because they won’t.

For a vertical menu, an indented submenu is a common way to expand the menu with subtopics such as the one shown on Microsoft’s Start Menu. This image shows what happens when the Windows System folder is clicked to show the programs found within it. The same technique could be applied to web pages related to a common topic.

Example of expanding a vertical menu with indented submenu items.

Another way to display a submenu is through the use of a ‘flyout’ menu. In the example below, the dropdown for the horizontal menu item, Academics, first lists various academic areas for a school. Next, the Performing Arts menu item from the dropdown has a fly-out menu that includes Band, Chorus, Orchestra, and Theatre. Similarly, the Band menu item has a fly-out for different band groups that are supported. Note that each menu item that has additional menu selections in a fly-out is indicated by a right-pointing arrow to hint to the user that there are more options.

Example of fly-out menus beginning with Performing Arts with the Academics dropdown menu.

Some sites have a large number of different topics and while a menu structure could serve to display links to each of the topics, sometimes a sitemap on a separate webpage with all of the topics listed is a better alternative. In the example shown below, a site map shows all the departments within an organization as links. The site visitor can then click on the department page to get redirected to the top page of that department. That does not mean that the department only has a single page. Indeed, it may have its own menu of individual pages and subtopics using any of the above navigation methods including this one. The point is that you do not want to display these subtopics in a menu off the website’s main page because the sheer number of subtopics across all departments would be too much information for most users to easily navigate. Therefore, the Home page of the site may have a single link for Departments which shows links to this page displaying the sitemap from which the user can select the department they need to visit.

Example of a sitemap or a mega-menu.

Rather than use a separate page for a site map, this same basic structure can also appear as a drop-down menu. But since the dropdown has more than one column, it is often referred to as a mega-menu.

The use of an individual image sometimes referred to as an icon image, can also serve as a menu provided the image has a properly defined title and alt properties to help the visually impaired. It is also possible to use an image with hotspots that the user can click on to navigate to different parts of the website. Sometimes that image uses graphics that the user might readily identify with an action or perhaps one or more words of text. In either case, the problem with this type of menu is that it is probably not ADA compliant because a blind user would not easily know where to click on the image or perhaps that they even must. To make the menu ADA compliant, you might need a secondary menu like one of the above structures to help blind visitors to your site navigate around. Also, if you do use text on an image, the font color of that text must contrast with the background color according to the ADA rules of color contrast which are:

  • Text and images of text that is at least 14 points and bold or at least 18 points must have a color contrast ratio between the text color and the background of at least 3:1.
  • All other text and images of text must have a contrast ratio of at least 4.5:1.

See:    Must Text Color Contrast with the Background of an Image? – NUEWeb

The Wonderful World of Color – NUEWeb

Newspapers Sometimes Print Useless Charts

One of the problems that occur when newspapers use a chart from another source is that the original chart may have been perfectly fine visually using colors that did not cause any problems for most viewers. However, when the image is printed in the newspapers, they tend to forget that newspapers only print black and white (and to some extent shades of grey). Unfortunately, the shade of grey used for each color may result in shades for two or more colors that are too similar to each other. This makes it hard to understand the chart.

Recently I did a presentation for our local SQL Saturday annual event on bias in charts. One of the examples I used was from an old election chart showing which states were red states and which were blue. While I am sure that the original chart was clear when displayed in color, the black and white version of the chart used in the newspaper eliminated the differences between these two colors.

Map of the US showing which states voted for Obama vs Romney

While this chart is obviously from several years ago, newspapers have not in the intervening years considered the effect of converting charts from other sources to black and white images. Today, I saw the following chart in our newspaper.

A map of Florida showing the COVID community transmission levels as of December 1, 2021

There may be some difference between the counties colored as Substantial and those colored as Low, but it is very difficult to tell even for me which color is which (a side criticism is that the grey scale does not follow a trend getting darker or lighter as one goes from Low to Substantial). My only clue as to what was going on was the statement above the chart that only 4 counties were not reclassified. Unfortunately, it is not entirely clear whether these 4 counties were previously Low or Substantial since both shades of grey are too similar especially in the legend boxes.

Since the chart listed the source as the US Center for Disease Control, I went out to their website to see if I could find the original images used. I believe that the image below may have been the source of the December 1, 2021 chart of Florida.

Possible original chart of Florida from the Center for Disease Control

Assuming you can see color, this chart makes perfect sense now. Even the progression of colors from blue to red indicates an increased level of transmission.

If this was the source for the chart, the newspaper obviously modified the chart to remove city names as well as the line in the water which represents what? They also removed levels (None and High) from the legend that did not apply to the state of Florida. Finally, they trimmed off the counties from the surrounding states to the north and west. But why did they stop there? They could have refilled the counties with shades of grey that would have been easier to see and could have represented a progression in severity. Of course, it might have been better if the original chart used different fill styles other than solid for everything to help those who have no color perception.

My point is that too often we create charts that are pleasing to our eyes without considering that other people do not see with our eyes, but with their own eyes which may not see things the same way.

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 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:

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.

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.