Designing Accessible Websites for the Visually Impaired: Colors, Layouts, and Tips

Tweet

Using website colors effectively for people with vision impairment is important to those wishing to reach the broadest possible audience with their products, services or information. There may be as many as 15 million visually impaired residents in the United States alone and 180 million worldwide. An estimated 21% are over age 65. Additionally, of men with European heritage, as many as 8%-12% struggle with some degree of color blindness. Only .5%-2% of women with the same background tend to inherit this condition. Whether the vision impairment is caused by aging, partial sight (poor acuity, tunnel vision, clouding, central field loss) or congenital color deficits, it is possible to build thoughtful web designs that can create user-friendly access and maneuvering, even for the vision-impaired.

Use of appropriate colors can be an important part of the ease-of-use for those people with special vision needs. Not all monitors reproduce accurately the colors you may have chosen for your web design. By staying within the recognized 216 "browser-safe color selections," you can be assured that the colors you choose will be passed on without change. This is important because certain color combinations lose their effectiveness when the level of contrast is diminished to vision-impaired viewers. Degrees of hue, lightness and saturation can be less distinguishable, which can be a significant problem, especially if the colors are being used as primary indicators.

By exaggerating the contrasts or light differences between foreground and background screen space, the person with a vision-impairment can more easily differentiate the colors. For the same reason, never use colors of similar lightness next to each other. Lighten the lights, blue-green, green, yellow and orange and darken the dark colors, blue, violet, purple and red for the most effective use of contrast. The more dramatically different you can make each area, the more clarity your web page will have.

Removing extraneous graphics and "busy-work" can un-clutter your website. A clean and simple layout is much easier to read and navigate. Designing in black and white with minimal added colors for emphasis is the best approach. Yellow, blue, white and black are the least confusing colors for people with vision problems. In fact, while it may not be the most attractive, 24-point white or light yellow text on a black background is considered the most readable color scheme for online users.

Labeling everything and providing cues in other ways besides color is also important. In fact, on your web page, color should never be the sole means of conveying information. Internet standards use blue for links, violet for visited links and red for active links. Changing this pattern can be confusing for your readers who may be using colors as a cue. Following Web standards is one way to make your site more user-friendly. But for those with color recognition limitations, by adding extra lead-in information to your links, you can make them stand out in the text rather than be over-looked.

Color blindness, also called color vision confusion, can create frustration for Internet users. Most people with this condition cannot differentiate between red and green, although yellow-blue confusion is also a possibility. A few cannot distinguish any colors, seeing the world only in shades of grays and blacks. These Internet users need other clues than color, such as icons and extra text. Red and green should never be used together, especially on navigation buttons or maps. By de-saturating your web page (taking all the colors out) you can more clearly see what your color blind audience will be viewing.

Creating appealing website pages that are usable by those with vision impairments as well as those with normal sight may require a little extra thought and planning; however, it increases your potential readership and customer base. It also shows sensitivity to the principle of inclusion, one of those qualities that demonstrate not only the character of your business, but of you as a person.