Color Palette
Accessibility Testing
Context
Before moving forward with a new brand color palette, at a life insurance tech start up (specific name available upon request) we wanted to ensure we've done our due diligence researching colors for accessibility. In particular I wanted to make sure we chose colors with high enough contrast to each other for someone with colorblindness to differentiate between, and high enough contrast of colors against white font.
Research Methods
First I tested and examined the old color palette. I found tools that would allow me to measure the difference in contrast between colors.
General Accessible Rich Internet Applications (ARIA) Practices
https://www.w3.org/TR/wai-aria-practices/#intro
Accessibility Color Wheel
Deuteranope, Protanope, Tritanope measures
http://gmazzocato.altervista.org/colorwheel/wheel.php
Accessible Color Evaluator
http://daprlab.com/ace/
Color Check for ADA
https://www.oss-usa.com/color-check-ada-image-compliance
Color Oracle (simulator to "see" images like someone who is color blind)
http://colororacle.org
Color Contrast
https://alfasado.net/apps/colortester.html
Color Contrast Determinator
http://www.visionaustralia.org/digital-access-determinator
Color Contrast Checker
https://contrastchecker.com
How to Design for Color Blindness
http://blog.usabilla.com/how-to-design-for-color-blindness/
Colorable for White font contrast
http://jxnblk.com/colorable/demos/text/?background=%2320BC97&foreground=%23FFF
Color Palette Generator
https://coolors.co/6a01bc-00be9b-f20039-ffc902-f49e2f
Web AIM Color Contrast Checker
https://webaim.org/resources/contrastchecker/
Old Color Palette
Almost none of the old palette (shown below) had colors with high enough contrast to each other to be discernibly different for someone with color blindness. Especially on the examples of the goal progress by intensity and the doughnut charts with a deuteranopia view you can see the old palette colors didn’t have high enough contrast for someone with deuteranopia.
New Color Palette
After a series of new colors were user preference tested via UsabilityHub and then I also measured their contrast. The new colors were tested and have high enough contrast to each other to still be rendered as different for people with colorblindness. Also all colors met accessibility standards to have high enough contrast against white font.
