What is this?
The Accessible Palette Creator is a tool for building color palettes to meet Web Content Accessibility Guidelines for color contrast.
The tool divides colors into four groups: dark high contrast and dark medium contrast, and light high contrast and light medium contrast. (In use, this could be light text on a dark background, or dark text on a light background.) Within each group, the color picker limits available colors so that pairs of dark and light colors meet accessibility guidelines as shown:
This tool is intended to create fairly bulletproof palettes. Every dark+light pair of high contrast colors is AA or better, and every dark+light pair of a high contrast and a medium contrast color is AA Large or better. While this constrains choices in creating the palette, it allows for a lot of flexibility in using the palette.
Basic instructions
The interface works best on laptop or larger screen.
To add a color, select the ‘New color’ button in one of the four groups. Use the color picker to choose a color. In addition to using the color grid, you can enter values for hex, RGB or normalized HSL. Click ‘Add’ or ‘Save’ to add the color to the palette.
To modify or delete an existing color, click on it. Click on ‘Update color’ or ’Save’ to save any changes, or ‘Cancel’ to deselect the color and revert to its original value.
‘Save palette’ and ‘Open palette’ download/upload CSV files. You can export to .ASE (for Adobe) and .sketchpalette (for Sketch with the Sketch Palettes plugin). These save the color values but not the groupings, so the files can’t be used to reopen the palette in the tool.
Keyboard shortcuts
- Enter to save a color
- Escape to deselect a button or close a modal window
- If you select the thumb for hue or saturation/luminance, arrow keys move its position
- If you hover over an existing color and hit the space bar, the picker will adjust to match that color (if you’re in the same group) or the hue and saturation values of that color (if you’re in a different group)
How it works
The color picker uses a variation of an HSL colorspace to show available colors. For a given hue, the picker shows a grid of colors according to saturation (horizontal axis) and luminosity (vertical axis).
Saturation and luminosity values are normalized using KDE's calculations, so that for any given luminosity value, the contrast against another color is (almost) the same. This lets the tool build the color picker without having to calculate the relative luminance for every color (which would take forever).
However, it’s not a perfect match with the calculation used in the WCAG standard. It gives a good ballpark range, but if you want to use a color at the top or bottom of the picker, keep an eye on the actual contrast value against other colors in the palette.
Source code and copyright
Copyright under MIT License by Daniel Soltis 2019. Source code is available on Github.
