Life insurance company
Color palette accessibility testing
Context
Before moving forward with a new brand color palette, at a life insurance tech start up we wanted to ensure we've done our due diligence researching colors for accessibility (the specific company name is available upon request; however, it has been omitted here to respect the client's preference for discretion).
I wanted to make sure we chose colors with high enough contrast to each other for someone with colorblindness to differentiate between them as the colors are used for different success/warning indicators in the platform. And the accessibility testing was to ensure a high enough contrast ratio of the background colors against white font for legibility (and to meet WCAG 2.1 standards).
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.
Color Oracle (simulator to "see" images like someone who is color blind)
General Accessible Rich Internet Applications (ARIA) Practices
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. All colors met WCAG 2.1 standards of at least 4.5:1 ratio or higher to have enough contrast of the background color against white font.
