18F Method PDF Color Blindness Issues

[18f]

18F Method PDF Color Blindness Issues

[shawnbot]

Thanks for this, @jfc3-dol! We could definitely take another our color choices with color blindness in mind. I also think it'd be a good idea to distinguish the categories via some means other than color: with texture, as you suggested, or maybe with iconography.

I'm curious: have you come across any nice categorical palettes that work particularly well for different color blindness conditions?

[jenniferthibault]

Hi @jfc3-dol , I'm Jen and I worked on the visual design of the printed cards. Thank you so much for such a thoughtful breakdown across the issues you just submitted, and for offering some actionable steps for us!

One way we tried to make sure that color was not the only factor that marked the printed cards as in separate categories, was to put the category in the lower corner of the card, like so:

I realize that this bit isn't shown in our hero image on the site, so isn't obvious unless you print the cards. @shawnbot we had indeed thought about iconography at one point, but if I'm remembering our thinking at the time, it felt a bit redundant with listing the category, icons, and color categorizing.

[jfc3-dol]

@shawnbot I have not come across any category palettes since we have had similar issues.

@jenniferthibault the two reasons I used the hero image as an example was so I didn't have to do each color background card for each type of color blindness and so that people could see how they compare to each other. Some are closer to each other than others depending on the type of color blindness a person has.

As the other issues, #76 and #77 talk about color contrast problems with those background colors with white text, you will have to think about trying to prevent both issues for those that are color blind and those with color contrast or even low vision issues.

[nickbristow]

Just to clarify this issue, @jenniferthibault

The cards are grouped by color and text included in the footer of each card, which is compliant under WCAG 2.0 and 508 for color dependence. (not color contrast)
http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G14

Also, as noted above, we could go beyond this with textures or iconography.

[jenniferthibault]

Since this is addressed by the footer category text, closing. Thanks all!