A11y Color Combinator

Find Accessible Color Combinations with the Option of Increased Contrast

Find A Combo Today!

I found many online a11y color tools that would give you one option at a time. And no option to adjust minimum contrast level. So I made this tool using Vue.js and Chroma.js.

Simply...

1. Select a minimum contrast level (cannot go below WCAG minimum of 4.4)
2. Select a base color from the color spectrum input or the random suggestions
3. Select an overlay color from the opptions generated using Chroma.js that adhere to the minimum contrast set in Step 1
4. Copy the CSS and you're on your way to making your content consumable by more end users

This is a Vue.js Project:

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.