Project summary
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.
Role and team structure
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.
Key activities
- Competitive analysis and light user research
- Wireframing and workflow design
- Javascript development
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.
Evaluating contrast in color 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:
- Add any number of colors to create a palette
- View the contrast between all colors
- Adjust any color to be lighter or darker
- Import and export palettes in CSV, for Sketch and for Adobe
Using contrast guidelines when creating a new palette
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.
Outcomes and learnings
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.
