Color + Accessibility
In addition to exploring new features for the UInclude tool, our client also requested that we take a look at their color coding palette and strategy.
We also heard in user interviews that beta testers were having a tough time discerning which colors were flagging which categories. Some also asked how this tool may work for someone who is colorblind.
![](https://cdn.prod.website-files.com/6233d50a16243aab7d9947d9/628d1704d1e97a3bb5c91608_Color%20Accessibility%20Study.png)
We used the Figma Color Blind plug-in to choose a set of (7) colors that was the friendliest to most color-blind groups.
Of course, these colors do not account for Achromatopsia (complete color blindness), but we do solve for this need with the addition of the Filter-By-Category Feature.
I also went back and checked all of the proposed colors against the WCAG 1.4.3 Color Contrast Guidelines. All proposed colors exceeded the most stringent (AAA) ratio.
![A snapshot of three suggestions we made to the UInclude team for their application of color:
1. Use only one color per category rather than showing masculine, feminine, and superlative words as separate colors. Show Gender bias as one color only.
2. Remove the green underline for flagging inclusive words. This was confusing in beta testing, and only adds to the cognitive load on the screen.
3. Show the inclusion score wheel as black and white. Adding color here competes with the colors used in highlighting biased words...and thus adds more confusion.](https://cdn.prod.website-files.com/6233d50a16243aab7d9947d9/6260d8048328ef95c49eb9e1_Color%20study%202.png)
We also suggested the above revisions to the UInclude color strategy:
• Integrating the 7 new colors into the biased word highlights.
• Removing the green underline that indicates inclusive language (this was confusing according to many beta testers of the tool).
• Revising the Inclusion Score wheel to a black and white design so as not to conflict with the colors used in flagging words in the text editor.