Understanding Colorblindness

Colorblindness affects around 8-10% of Caucasian males and less than 0.5% of females. It is more rare for other ethnic groups to experience colorblindness.

• Protanopia is a condition where reds and greens can be difficult to distinguish; furthermore, reds often appear darker than they really are.
• Protanomaly is a similar, but generally less severe condition. The colors are still difficult to distinguish, but some perception is still available.
• Deuteranopia is similar to protanopia, but reds maintain the same brightness value. It’s caused by a deficiency in the cells that detect green light.
• Like protanomaly, deuteranomaly is a similar but less severe condition. Deuteranomalous vision is also the most common form of hereditary colorblindness.
• Tritanopia involves confusion between blues and greens. It is extremely rare to inherit tritanopia, but it can be acquired due to conditions like diabetes or Parkinson’s disease, or simply through old age.
• Atypical achromatopsia is a decreased sensitivity to color. Only very clear colors are easily distinguishable. It is normally inherited.
• Typical achromatopsia is a complete inability to see color. It is normally accompanied by photosensitivity—that is, “normal” light levels are too bright. Both forms of achromatopsia are incredibly rare.

For both protanopia and deuteranopia, it’s well accepted among researchers that variations on yellow, orange, and brown colors are probably what people see in place of red and green. So as well as confusing red and green with each other, it’s likely that those hues in between can be confusable too.

The following simulated photographs use this theory to demonstrate how color deficiencies in their more severe forms can affect the perception of color. You can use the tools at Vischeck or the Colorblind Web Page Filter to perform similar experiments on images and Web pages.

Top: Unaltered image. Bottom, left-to-right: Protanopia, deuteranopia, and tritanopia simulations.

Now Don’t Panic!

Don’t be put off by all these different variants and their sometimes-dramatic results. Any problems that a colorblind user may encounter with your Web site are often due to matters of contrast and distinguishability, which we’ll also address when we’re thinking about people with poor vision. So hold that thought; we’ll get to it in a little while.

Color and Meaning

The absolute minimum you ought to do about color is this: do not rely on color alone to convey anything important or meaningful. Since forms are a particularly troublesome spot for accessibility, we’ll use a form as an example.

Highlighting is often used to draw attention to errors in Web forms.

Think about what happens when you fill in a form on the Web. If you’ve missed some essential details, you will usually be told that you can’t proceed until you fill them in. A considerate Web designer will present you with the form again, and highlight the required fields so that you don’t have to go hunting for the ones you’ve missed. In the example above, red text has been used to highlight the offending field.

However, using color by itself causes problems. Someone with a color deficiency might see that red as a dark grey, black, or washed-out brown. Someone using a PDA might not see your color at all. Someone on a screen reader or a text-only browser definitely can’t see your color.

Try using other elements to indicate items of importance.

The example above uses a combination of an image, additional highlighting with a border, and an added line of text to indicate the problem. It’s added a level of redundancy for those who can’t see your colors.

Naturally, using color as a highlight is extremely useful to other groups that need accommodation. People with dyslexia or a cognitive disability, poor language skills, and even children can get a lot of benefit from visual cues like color. However, it should not be the only thing that conveys information.

Colorblindness and Your Images

First rule: don’t worry about decorative elements, photos, or anything else that doesn’t carry out a particular function. Colorblind people are used to perceiving the world in the way that they do, and the fact that they might not see the exact shades in your vacation photos is not going to be a show-stopper.

For functional objects, try to be aware that using confusable hues can cause problems. It’s still OK for you to put red, yellow, and green together, but it’s also important to check that the contrast is sufficient.

Not only is this button really tacky (left), but it could potentially become unreadable when viewed by a colorblind visitor (right).

Similarly, here’s how the new line of iPod minis look when passed through a deuteranopia simulation:

If you had to click on one in order to purchase it, how would you know the difference between the two silver-colored ones, and the two gold ones? Good thing Apple put the color names above the iPods on the Apple Store page. Imagine Mrs. Jones’ dismay if the green iPod her husband promised her turns out to be the Barbie pink variant.

On Links

This particular color crime deserves a special mention.

Now that we have more control over link decoration, thanks to cascading stylesheets, we can play all kinds of neat tricks—remove the underline, give links a background color, change their weight, and so on. Again, it’s not a fantastic idea to merely make your links a different color—in particular, within body copy.

What’s a link, and what’s a highlight? I shouldn’t have to mouse over the link to find out.

You can get away with this if your links are in a navigation bar, a sidebar, or something similar. Web surfers are usually smart enough by now to know that a group of words in a row at the top of the page, or a column down the side, is probably a navigation bar. However, it’s definitely a good idea to use color and something else, like an underline or a background, in your body text.

While this doesn’t affect people using text-only devices or screen readers, it does affect anyone with a color display. Don’t be tempted to bend the rules too much on that one.

Color and Text

When you’re choosing text colors, anyone who’s spent even five minutes learning about design can tell you that high contrast between the text and its background is the best choice for most people. It’s easier to distinguish the shapes of words and letters, especially when one’s vision isn’t so good.

This doesn’t mean that you have to restrict yourself to black text on a white background, or vice-versa. You can afford to venture a little further afield as long as your text is still crisp and legible.

Oh, and this really shouldn’t have to be pointed out, but do avoid busy background images as often as you can manage. Not only are they usually chosen with incredibly poor taste (take a stroll around GeoCities sometime), but the variations in color and brightness can make it even more difficult for someone who’s already having trouble with their vision. If you absolutely must use an image for a background, consider darkening or lightening the image, and reducing the contrast. Less variation in brightness means that the text can stand out over all parts of the image, not just selected parts.

Notice how a reduction in brightness and contrast on the background makes this text easier to read.

Note this well: Remember how we discussed browser preferences—specifically, the ability to choose your own colors? When you define colors for your page, there are five colors that you absolutely must define without fail: background, normal text, link text, visited links, and active links. In old-style HTML, you can specify this in the body tag:

<body bgcolor="#ffffff" text="#333333" 
      link="#993300" alink="#000099" vlink="#660000">

And in a cascading stylesheet, which is the preferred technique today:

body {color: #333333; background-color: #ffffff;}
a:link {color: #993300; text-decoration: underline; }
a:visited {color: #660000; }
a:active {color: #000099; } 

If you leave one or more out, a person’s browser preferences could come into play for the missing pieces, and that can cause all kinds of trouble. Specify them all, or don’t specify any.

Text Size

Again, thanks to cascading stylesheets, we have more control over how to specify text sizes beyond <font size="4"> and <big>. If you’re still using these old-style tags for defining your font sizes, please be aware that they have long since been abandoned in favor of stylesheets and are no longer recommended.

There’s a selection of units we can use to define our font sizes: some, such as picas and centimeters, have no place on the screen and are best used for print stylesheets. Others relate specifically to screen-based measurements, such as pixels, and still others are displayed relative to the current browser default. The ones we’re interested in are the relative units: ems, percentages, and the font-size keywords.

• ems are named for the idea that they are the width of the character ‘m’, but are normally somewhat larger. On its own, one em is the size that is specified by the browser setting; when it occurs later in the page, it is based on the font size that inherits from a surrounding element. For example:

  body { font-size: 0.8em; }
  .footer { font-size: 0.8em; }

  In this scenario, the body is 0.8 times the size of the browser default—with the usual default of 16 points, this will be roughly 12 or 13 points. But because of the way elements inherit font sizes from their surroundings, the class .footer is 0.8 times the size of the body text—about 10 points. Be mindful of inheritance.

  The redheaded stepchild to the em is the ex, which is named for the x-height of the font, and is around half of the default font-size. Exes are seldom used.

• Percentages are fairly simple: a font-size of 100% on its own relates, again, to the browser’s default size. If we’re looking at the usual browser default of 16pt text, then 100% is—surprise—16pt. 110% is 16pt + 1.6pt = 17.6pt. Browsers will round that up or down differently, so don’t rely on it for finer control. Percentages rely on inheritance, like ems.

• The font-size keywords are xx-small, x-small, small, medium, large, x-large, and xx-large. The medium keyword corresponds to the browser’s default size. The differences between them were supposed to be 1.5 times—so large should be 1.5 times the size of medium—but most browsers use different variations. Unlike percentages and ems, font-size keywords aren’t affected by inheritance. Bonus: xx-small can never be too small, as browsers won’t let keyword-specified text get below nine pixels in height.

  body { font-size: small; }
  .footer { font-size: small; }

  Both body and footer would be the same size.

• We’ve got two more tools in our arsenal: the bigger and smaller keywords. Unsurprisingly, they are a simple increase or decrease of text size, and are inherited.

  body { font-size: 1em; }
  .footer { font-size: smaller; }

Point sizes are much favoured by people from the print world, because they’re familiar. However, they can vary greatly between platforms—Macs generally calculate point sizes with a reference point of 72 points per inch (ppi), while Windows machines can use anywhere between 96 and 120 ppi. If you were to define text as 8 points on a Windows machine, it’d be a reasonable size. On a Mac, however, it’s illegible. Here’s a graphic example from the good old days of Internet Explorer 4.

Broken Browser Alerts Aplenty!

• Netscape 4 treats ems as pixels. This is obviously not good. If you use ems, try to hide that portion of your stylesheet from Netscape 4. (Find out how.)
• I’d love to add pixels (px) to the list of acceptable font sizes, and for most browsers they present very little difficulty. Unfortunately there’s a particular browser that does not increase pixel-based sizes appropriately, even when you use the browser’s View menu to increase the text size. That browser—you guessed it—is Microsoft’s Internet Explorer.
• What’s more, Internet Explorer for Windows will sometimes get a little strange when it’s told to use less than 1.0em. 0.9em, rather than being a smidge smaller than 1em, will get several steps smaller. If you’re in the habit of using ems to define your text, you might like to switch to percentages when thinking about smaller text.
• And finally, Internet Explorer 5 for Windows thinks that the font-size keyword small relates to the browser default, not medium like everyone else. Oops.

All these choices, and all those bugs. What to do?

Most people’s browser default is 16-point text, and since I care about those in my readership with normal vision as well, I find that setting to be unneccessarily large for most people. I also want the differences between browsers and platforms to be minimal at best.

You can get good results by defining the body element in your stylesheet as either the small keyword or a percentage less than 100% (76% works well), and then using percentages from that to adjust the sizes for other things. People whose browser settings are adjusted to provide larger text will see something larger than the default, and temporarily adjusting the size by using the View menu works for just about everyone. It’s a happy compromise.

Pictures of Text

Put simply, it’d be preferable if you didn’t use pictures of text too often. They cannot be enlarged, or overridden with the viewer’s preferred color, in the way that text can. This is even a problem for Opera, which helpfully blows up everything on the page when you adjust sizes; your image might have become bigger, but now it’s all pixellated. Yuck.

If you must use an image, don’t forget to give it an appropriate alt attribute. Stick to using them for headings: using images as body text is, frankly, an evolutionary throwback. We have better tools to control real text now, and it’s about time you caught up.

When you use a picture of text as a heading, don’t forget to mark it up as a real heading, using the appropriate h1-h6 heading tag. Just put the image inside the headings tags, and voila: now your text browsing and screen-reader-using folks can tell that it’s a real heading, too.

Leading, Width and Spacing

We discussed spacing in the last installment of this series, but a quick recap won’t hurt: it often aids in legibility to leave some room around your blocks of text, and in between lines. Clearly defined areas aid those with a visual impairment or a cognitive disability to identify the areas of your page, while added line height makes it easier to keep your focus on a line.

Give your text areas plenty of margins, and increase the line height of your text. This is easily accomplished with CSS:

p { line-height: 180%; }
div.bodytext { padding: 20px; }

Choosing a Typeface

Oh right, like I’m going to download a whole new font just to see your Web site.

Fonts are best chosen with care, and attention to the fact that there are really very few choices that appear on most people’s computers. From an accessibility viewpoint, it’s not really an issue—fonts that are hard for everyone else to read are generally bad for the visually impaired as well.

For on-screen use, some typefaces are more legible than others. Fonts like Verdana, Geneva, Lucida Grande, and Trebuchet have been designed with on-screen viewing in mind, and have nice, large x-heights on their letters. Fonts like Times and Gill Sans seem somewhat smaller, and the serifs on them can cause “fuzziness” around the letter forms at smaller sizes.

It’s best to limit your font selection to a few choices—changing fonts several times in a document looks dreadful, and can be extremely confusing. A good rule of thumb is to use a serif text for headings, and sans for body—or vice versa.

When you define fonts, do make sure that you provide a few fall-backs. For example, Verdana is quite popular, but it doesn’t cover everyone. As a last resort, specify a generic font family: if none of your named fonts are present, it will choose the browser’s default setting for that generic type.

body { font-family: Verdana, Arial, Lucida, Geneva, sans-serif; }