Color Palette Accessibility Testing

Color Palette.png

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 writing in white.

 

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/

Almost none of the old palette (shown above) had colors with high enough contrast to each other to be discernibly different for someone with color blindness.

 

New Color Palette

After a series of new colors were user preference tested 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.