Skip to content
A tool for evaluating the contrast between colors in a palette. Loads and saves .ase and .sketchpalette files, as well as allowing users to add and modify colors within the tool.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
ase.js
contrast.html
contrast.js
index.html
jdataview.js
loadAse.js
styles.css

README.md

Color Palette Contrast Tester

The Color Palette Contrast Tool evaluates the contrast between colors in a palette, to make it easier to create UI that meets Web Content Accessibility Guidelines. Unlike most other available tools, it evaluates a full palette rather than a single pair of colors, and it loads and saves files used with common design programs.

Loading and saving palettes

Use the top menu buttons to load and save color palettes. Colors are limited to solid colors; no transparency, pattern fills or gradients. Supported formats include:

  • Adobe Swatch Exchange (.ase). Right now, the tool will read grouped colors but won't preserve the groupings when you save. It's on the to-do list.
  • Sketch palette (.sketchpalette), for use with the Sketch palettes plugin
  • Comma-separated values (.csv) in a custom format. This lets you save and view palettes without any design software.

Adding an individual color

To add an individual color, click on the ‘add color’ button at the top left of the main content area. You can enter RGB or hex values.

Changing a color

To change a color, click on the label at the left or top of the main content area. You can make the color darker or lighter, or directly change its value.

Copyright and credits

Copyright under MIT License by Daniel Soltis 2019.

ASE file reading uses code from Ger Hobbelt, which I can't seem to find online anymore...

Sketchpalette encoding uses code derived from the source code for Andrew Fiorillo's Sketch palettes plugin.

You can’t perform that action at this time.