How do my choice and use of color affect the accessibility of my website?
AccessIT Article ID: 1222
As people create websites or electronic documents, they should consider whether their use of color will prevent some users from accessing their content. Any information that is communicated using color should also be communicated using some means other than color. For example, if color is used to differentiate link text from other text on a page, users who are unable to perceive color differences will be unable to spot the links. A solution in this example would be to underline the link text or provide some other cue other than color alone. This way, if a user is unable to perceive color, they can still access the information.
It is also important to assure that foreground and background combinations provide ample contrast. The World Wide Web Consortium's Web Content Accessibility Guidelines (WCAG) 2.0 provides very specific rules regarding contrast, including an algorithm for measuring conformance. Since contrast is measurable, several free tools have been developed that designers can use to check that color combinations. Examples of these tools include:
- Contrast Analyser for Windows and Mac
- WebAIM Color Contrast Checker
- Juicy Studio Accessibility Toolbar for Firefox, includes a contrast checker
Another free tool, Contrast-A, was created by Annika Hamann to enable users to experiment with color combinations and create custom color palettes that meet WCAG contrast guidelines.
There are also several tools available that simulate color blindness so designers can sample their graphic art or web pages to see how they might be perceived by individuals with particular types of color blindness. Examples include:
Last update or review: August 13, 2013