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
|Check site with color checkers or grayscale minor|
|Use color coding alone|
|Use blue/green or black/white/gray|
|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
|+||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
|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.