Color your website accessible
Colors make websites vibrant and, sometimes, inaccessible. Those who are colorblind (about 1 in 12 men and 1 in 200 women) and those with low vision often cannot use certain websites due to their color schemes. It doesn't have to be that way.
Colorful websites that are accessible adhere to two key rules:
- Provide ample contrast between the foreground and background
- Don't use color alone to convey information
Got questions? Contact web accessibility coordinator Zayira Jordan, email@example.com, 294-0982.
Here are some practical examples of how to put these rules into practice.
Check the color contrast
The contrast ratio (or relative luminance) measures the contrast between foreground text and its background. Accessibility standards require contrast ratios to be at least:
- 4.5:1 for normal text (14-16 pt)
- 3:1 for larger text (14 pt bold or 18 pt)
There are a number of online and downloadable tools to check contrast ratios. Most also provide a "pass" or "fail" grade, based on standards of the Web Content Accessibility Guidelines (WCAG). Iowa State's proposed accessibility policy calls for university websites to comply with WCAG's Level AA standard.
- WebAim Color Contrast Checker
- Luminosity Colour Contrast Ratio Analyser
- WAVE. This accessibility tool checks all the colors on an existing page. Submit a URL, then click the "contrast" button (upper left side of the results page).
- Paciello Colour Contrast Analyser. This free tool can be downloaded to PCs or Macs.
Touch up forms
Color often is used in online forms to denote mandatory fields. The "before" form specifies that all red fields must be completed. Coloring the mandatory fields red is a helpful visual for some, but useless for those who can't easily differentiate between red and black text.
The "after" example keeps the red color cues, but backs them up by adding a "required" notation to mandatory fields. The added text opens the form to those who are color challenged and to those who use screen readers to view websites.
To create accessible charts, use color combinations that are considered "colorblind safe." The Colorbrewer 2.0 site provides a number of color sets that are easy on the eyes of those who have limited color vision. To make bars and pie slices stand out even more, add different patterns to the charts.
It's also helpful to add text to help users interpret charts. For example, the text below the bars on the "Favorite Fruits" chart takes the hassle out of trying to figure out the percentages yourself.
Charts, like almost all visuals on a web page, also should be accompanied by descriptions of what the data means. These descriptions are essential for those using screen readers. For complex charts, the descriptive text may be posted on its own page with a link from the chart.
- Accessible PowerPoints are on students' wishlist, March 30, 2017
- Captioning, with an assist from YouTube, Jan. 5, 2017
- Well formed forms, Oct. 20, 2016
- Links that do the job, Sept. 1, 2016
- Color your website accessible, July 21, 2016
- How to create accessible Word docs, June 23, 2016
- The art of alt text, June 9, 2016