Color palette contrast, 2017-
Accessibility, prototyping

The contrast between text and background is a key part of accessible web design—if contrast is too low, text can be difficult or impossible to read. In a color palette for UI, there should be enough combinations of colors with enough contrast to support a range of readable text and UI elements.

As a side project, I've been working on tools to help designers meet accessibility guidelines for color contrast. The Color Palette Contrast Tester enables users to measure contrast and adjust colors in a palette, and the Accessible Palette Creator helps users build color palettes with accessible contrast baked in.

Evaluating color contrast. While there are many online tools to test whether a given pair of colors meets accessibility guidelines, few compare several colors together, and I haven't found any that integrate with design software. In the Color Palette Contrast Tester, users can compare color contrast across multiple colors, adjust colors to improve contrast, and load and save files for Adobe and Sketch.

Source code is on Github.

Screen shot of contrast tester with several colors in a grid, showing contrast results for each pair. Screen shot of the interface for changing an existing color.

Creating accessible palettes. After building the contrast tester, I realized that it would be more straightforward to measure contrast while building a palette, rather than testing and adjusting after the fact. The Accessible Palette Creator is an experiment in incorporating contrast testing into palette creation.

The interface divides colors into light and dark. 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.

Source code is on Github.

Screen shot of the palette creator, with several colors in a palette.