Supplementing Color Coding

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.

Inaccessible Red/Green Encoding

Accessibility Color Do's & Don'ts
Red Box = Don't Green Box = Do
Issue Description
Green Box Do Check site with color checkers or grayscale minor
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 colors

A color blind 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 were included.

 

Accessible Color Coding with Shape

Accessibility Color Do's & Don'ts
Red x = Don't Green + = Do
Issue Description
+ Check site with color checkers or grayscale monitor settings
x Use color coding alone
+ Use blue/green or black/white/gray
x Use red/green colors

Color deficient users can rely on cues of shape in the "+" and "x" symbols to distinguish "do's" and "dont's". Using text symbols with a key is also more accessible to screen readers.

 

Accessible Color Coding with Text

Accessibility Color Do's & Don'ts (colored text)
Issue Description
Do Check site with color checkers or grayscale minor
Don't Use color coding alone
Do Use blue/green or black/white/gray
Don't Use red/green colors

Color coded, but text labels makes it accessible to color blind users and screen readers.

 

Top of Page