Page Content

Color coding is possible as long as the color information is supplemented
with differences in shape or text. Here are some accessible and inaccessible
examples.

WCAG 2.0 Guidlines on Color Coding

If you plan to use color coding to convey content, you should ensure that there is a second mechanism (e.g. different shapes or text labels) to provide the information to audiences who cannot perceive the color changing including the blind and color deficient users.

WCAG Guideline 1.4.1–"Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"

 

Coding Right/Wrong (Red/Green)

A particularly problematic case is red vs green color coding because that is the most common form of color deficient vision. Below are some examples of how to incorporate color coding in an accessible manner.

Inaccessible Red/Green Encoding

Accessibility Color Do’s & Dont’s

Red Box=Don’t Green Box=Do
Bx Do’s and Dont’s
Green Box Do Check site with color checkers or grayscale monitor
Red Box Don't Use color coding alone
Green Box Do Use blue/green or black/white/gray
Red Box Don't Use red/green

A colorblind user could have trouble distinguishing a green box from a red
box. Furthermore, a colored cell would be inaccessible to screen readers unless
invisible text was included.

Note: An ALT Text was added for screen reader use.

Top of Page

More Accessible Alternatives

The following examples provide examples of how shape or text labels supplement the color coding.

Accessible Color Coding with Shape

Accessibility Color Do’s & Dont’s
Red x =Don’t Green + =Do
Symbol Do’s and Dont’s
+ Check site with color checkers or grayscale monitor
x Use color coding alone
+ Pay attention to contrast in lightness/darkness
x Use red/green along

Color deficient users can rely on cues of shape in the “+” and “x” symbols to
distinguish “dos” and “don’ts”. Using text symbols with a key is also more
accessible to screen reader users than color-coding alone.

 

Accessible Color-Coding with Text

Accessibility Color Do’s & Dont’s (colored text)
Symbol Do’s and Dont’s
Do Check site with color checkers or grayscale monitor
Don’t Use color coding alone
Do Pay attention to contrast in lightness/darkness
Don’t Use red/green alone

This table is color-coded, but the text labels makes it accessible to colorblind users and those using
screen readers.

Use Red and Blue

Developers using red and green to encode "right" and "wrong" may want to consider replacing green with a shade of blue. A higher percentage of viewers can detect a distinction between red and blue then red and green.

See examples below:

Normal Color View

Two pie charts. In first, red is bad, green is good. In second, blue is good.

Note: It’s still important to supplement color with additional cues. Here text labels indicate bad vs. good proportions of the pie chart.

Red-Green Vision Loss

This is the same image viewed in the Deuteroanomaly filter in Photoshop. The blue hue is preserved, but the green becomes a shade of yellow.

Same pie charts. Green becomes yellow, but blue is retained.

Top of Page