Section 1: Design Considerations: Color

Color Considerations

Throughout this course, ensuring the user's accessibility to your web site has always been stressed; this is no different in regard to the use of color in your web page design. As you create a color scheme for your web page it is important to remember that some of the visitor's to your page may have difficulties differentiating between colors due to some form of colorblindness. In fact, it is important to note that "about five to eight percent of males (approximately 10.5 million) and less than 1 percent of females" suffers from colorblindness (Liu, 2010, para. 1). This is a huge percentage of the population that has difficulties differentiating between colors. Therefore, it is important that you consider the colors used throughout your design to ensure your site's accessibility.

Web Content Accessibility Guidelines

In 1999, the World Wide Web Consortium wrote the Web Content Accessibility Guidelines (WCAG). The WCAG created standards that addressed a wide variety of web accessibility issues; to include: the use of tables, the use of colors, the use of navigation and more.

In regard to the use of color, the WCAG specified that background and foreground colors should have ample contrast so visitors to a site, who suffer from colorblindness, can differentiate between colors. This is of particular importance in regard to the contrast between the background color and the text (foreground) color of a web page. If your web page does not have ample contrast between colors, there is the possibility that the information presented will not be viewable.

Extend Your Understanding: Color Contrast

The standard contrast ratio (the ratio between the brightest color and the darkest color) in the Web Content Accessibility Guideline is specified as 4.5:1 ("Draft U.S. Web," n.d.). Use the following color contrast checker to verify that the color scheme you are considering for your web page design meets or exceeds the standard contrast ratio.

• Accessibility Checker Color Contrast Checker (link opens in a new tab)

In addition, review the following information regarding text accessibility. Pay particular attention to the section on fully accessible combinations (text to backgrounds).

• Visual Style: Text Accessibility (link opens in a new tab)