Color Blindness and Warnings: Think Red/Blue, Not Red/Green

Probably the best way to create a color blindness issue on a Web is to use Red/Green color coding. Even the latest WebAim Screen reader survey uses red and green pie charts. The good news is that the WebAim pie chart sections are labeled, but they still come out as a giant mustard brown pie in the Photoshop CS4 Color Blindness filter proofing tools.

One way use the color coding, but enhance usability for color blindness users is to bump your greens towards a blue. Blue is a good color because it typically appears blue to users with different types of red/green color blindness (the most common type of color deficiencies). So instead of a pie chart with lots of yellow slices, the color deficient users would see blue and yellow – which maintains a hue distinction.

You can see a demo below.

2 pie charts, left with red area for Bad and green for Good and right with red for bad and blue for good
Red-green vs red-blue pie chart.

Same charts in color deficient view. Left is yellow fore bad and brown for good, left is yellow for bad and blue for good
Same chart in protonopia color blindness filter view.

The first image shows two pie charts in which red is “Bad” and “Good” is green in the first version and a bluish cyan in the second. The next shows the charts in one of the Photoshop Color Deficient Proofing views. The red/green original becomes mustard yellow and brown while the red/cyan version has both blue and brown. Neither matches my original artistic vision, but at least the one where blue is maintained shows more of a difference.

This entry was posted in Accessibility. Bookmark the permalink.

Leave a Reply