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.