Color your website accessible

By Diana Pounds
July 21, 2016

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

Accessibility assist

Got questions? Contact web accessibility coordinator Zayira Jordan, zjordan@iastate.edu, 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.

Here are some good checkers.

Touch up forms

Good example of color on a form

AFTER: "Required" text an easy fix

Bad example of color on a form

BEFORE: Some can't pick out the red

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. 

Color-safe charts

Chart on favorite fruits

Color combos and patterns = accessible charts

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.

Related stories