Accessible Design: Best Practices

Color

Color used for layout.

Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (508.c) (WCAG 2.1) (M.W.A.S. 3)

How does colored text affect the blind or the visually impaired? What happens to color-relayed information when presented on a monochrome monitor, printed from a black and white printer, read by someone who is color blind or read by a screen reader? The color-coded information is lost.

EXAMPLE #1 -- Content:

"Here is a list of questions from the final. The items in RED are mandatory for an A in the class; the items in BLACK are provided for extra credit.

What is the name of the course?
What is your name?
What is my name?
How many times did you come to class?"

The above information, when restated, will convey importance to those unable to utilize color while still using color as visual clues for the visual user.

Reconfiguring the example will insure that text and graphics convey the correct meaning when viewed without color:
"Here is a list of questions from the final. The first 2 items are mandatory for an A in the class; items 3 and 4 are provided for extra credit.

1. What is the name of the course?
2. How many times did you come to class?
3. What is your name?
4. What is my name?"

Color is used, however the information is conveyed in a way that relays the importance and layout with dependence on color.

EXAMPLE #2 -- Links :

Can you find the link in this sentence?
[tip: after you visit the linked page, return to this tutorial page and see the difference. Notice how easy it is to find the link then.]

Most cases are not this severe. Rather, a web designer might use red to indicate link text and blue for all other text, but when printed or viewed on a monochrome monitor (e.g., handhelds or PDAs) the distinction disappears. Also, when links are also headers or lists, the different color seems to indicate hierarchy, rather than link text. Except in the case of menus or navigation bars, links should be identified not only by color, but also with underlining and/or bold.

return to top

Contrast Colors.

Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. (WCAG 2.2) (M.W.A.S. 4)

Background color and text color should have the highest contrast. Persons with low vision, monochrome monitors or learning disabilities (and those who don't want to strain their eyes) will be unable to view your text if it is not easily read.

Test your pages by printing them or by setting your browser to black, white and a few shades of gray. If the information is readable, contrast is good and the information conveyed without color then the text and color layout of the page is good.

Lighthouse International has excellent information on the use of high-contrast colors and useful guidelines on legible text.

Want to see what colors look best on your background? Want to know which groups of colors work well together? Check out the Color Laboratory. This color laboratory allows you to select colors and see how they appear next to one another, and in various foreground/background combinations. It also allows you to see those colors as they might appear to color-blind users.

See what your pages look like to a users with different levels of colorblindness. Process your pages through the Colorblind Web Page Filter.

return to top

Next