I developed an online tool that enables people to test and adjust color palettes to meet accessibility guidelines for color contrast.
You can use the tool here. My favorite parts of this project included researching the technical elements of color contrast and designing, developing, testing and iterating a tool from start to finish.
Designer and developer. Initially inspired by a request from UI designer colleague who couldn't find a tool to meet her needs, I designed and developed this independently.
The contrast between colors is a key part of accessible web design. If foreground and background colors are too similar, reading text and understanding icons can be difficult or impossible. (Think of light gray text on a white background.)
Color palettes for UI should have enough dark and light colors to support multiple combinations with accessible contrast.
Many online tools test if one pair of colors meets accessibility guidelines, but few compare several colors together and none make it easy to import or export full palettes.
The Color Palette Contrast Tester is a tool for evaluating color contrast, targeted to working with full palettes and integrating with common design tools. Users can:
After building the contrast tester, I thought that it would be more straightforward to test contrast while building a new palette, rather than adjusting after the fact. The Accessible Palette Creator is an experiment in incorporating contrast testing into palette creation.
The interface helps users organize colors into groups with different levels of contrast against each other. As a user adds colors, the color picker adapts to only show colors that are high enough contrast against all opposite colors in the palette (i.e. light against dark or vice versa). Users can add colors manually, save and reopen palettes, and export for Adobe and Sketch.
In the spirit of making the tools you need, I use the contrast tester all the time. My current role involves information visualization, and I often check if sets of colors are accessible. This tool makes it easy to compare the full set at once and find and fix colors with low contrast.
The palette creator has a few bugs and I don't use it the way I expected. I almost always have existing color values as a starting point, and the way the picker enforces contrast means that sometimes I can't enter a color to evaluate it.
Like any side project, these tools are never finished. I'd like to add a full color picker to the contrast tester, so you’re not limited to adjusting only a color’s lightness. The palette creator needs deeper rethinking – I need to allow more flexible color creation without losing the logic behind how the palette is organized.