Color palette contrast, 2017-
Accessibility, prototyping

The contrast between text and background is a key aspect of accessible web design—if the 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.

While there are many online tools to test whether a given pair of colors meet accessibility guildelines, few compare several colors together, and none make it easy to import or export full palettes. The Color Palette Contrast Tester makes it easy to evaluate contrast in color palettes: users can import .ASE palettes, add and delete colors individually, adjust colors, and save the resulting palette.

Screen shot of contrast tester with several colors in a grid, showing contrast results for each pair.

The tool is still in prototype stage, and it's not quite feature complete. Plans for further development include: rewrite to use vanilla HTML, CSS and javascript where possible; improve usability and add capabilities for adjusting colors; improve usability for very large palettes; add .ASE export capability; improve the look and feel of the interface.

Third party libraries include p5.js, Adobe.ASE.load.js, jDataView, and jscolor.