Effective Use of Color


There are two accessibility issues related to choice of color:

Avoid Using Color to Communicate Information

Some users are unable to perceive color differences, or may not perceive color the same way you do. Therefore it is important to avoid using color alone to communicate information. For example, if link text is blue, it should also be underlined so users who are unable to perceive color differences can distinguish links from surrounding text.

Choose Colors with Ample Contrast

Some users have difficulty perceiving text if there is too little contrast between foreground and background. The W3C Web Content Accessibility Guidelines 2.0 require that color combinations meet clearly defined contrast ratios. In order to meet the guidelines at Level AA, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).

Several free tools have been developed that make it easy to check color combinations for WCAG 2.0 compliance. Following are a few examples:

CMS Login