AccessibleColor.design (view on Github.io)

Previously known as “ColorCube” — A brand color palette accessibility checker. Renamed in 2022.

Made possible by the excellent TinyColor JS library.

Table of Contents

• Why
• Local Setup
• Offline Mode
• Contributing
• Alternatives
• Team

Why

Why create another color contrast tool? There are already so many great tools out in the wild!

True, but, all of the tools we have found deal with only one color at a time. We wanted a tool that could assist in evaluating an entire color palette, showing us common combinations (black and white) as well as which color pairs can be used together and which to avoid.

Additionally, we wanted this tool to adjust colors on the fly in order to achieve a passing grade. (Typically, you have to use another tool to change the color, like Photoshop or HSLpicker.com.) With HSL (Hue Saturation Lightness) manipulation as part of the tool, colors can be darkened or lightened without effecting the “intent” of the color through its Hue.

Local Setup

Very little! This project is (mostly) vanilla HTML/JS and some SASS.

1. To make HTML or JS edits, open the index.html in a browser and edit assets/js/colorcube.js in your editor of choice.
2. To compile SASS or make SCSS edits, use a local command from the project root: $ sass --watch assets/scss:assets/css

Need SASS? Download the latest build from the SASS Lang page. We prefer Brew, if it matters, and version 3.7.4 minimum.

Offline mode

This project uses PWA (Progressive Web App) features to provide an app-like experience and to function when your device is offline.

If you are contributing to the project, you'll need to understand how to bypass this cache to see your changes and test your work with and without a network connection to ensure offline mode continues to provide a good experience.

1. Be sure to update the static cache version staticCacheName in the service worker file (sw.js) to force client-side cache invalidation
2. Add new files to the assets array where it makes sense so they are available offline to return visitors

Contributing

1. Take a look at our issues list or create an issue and describe your idea.
2. Open a new Pull Request
3. Profit! Or, you know, feel good about yourself for contributing to the community

Alternatives: Other Great Tools that Provided Inspiration

• ContrastGrid — A very useful tool for multiple color comparisons. Shows A LOT of information in a table format
• Contrast Checker — Simple comparison of two colors. One of the nicest, cleanest interfaces
• Contrast Finder — Provide two colors, but get back multiple possible shifts in the provided color to make a more accessible pair
• Contrast Ratio — One of the earliest from Lea Verou (limited to two colors)
• Snook’s Colour Contrast Check — Perhaps the earliest contrast tool from Snook (limited to two colors)

Team

Initially created by Kathy Beck, Brandon Herford, Brian Hogue, and J Hogue during Oomph Inc.'s Hack Day, May 2017. Maintained by the Oomph team. Rebranded and renamed in 2022 to move away from a similarly-named iOS puzzle game.