Skip to content
Color combination contrast tester
HTML JavaScript
Branch: master
Clone or download

Latest commit

Latest commit b07d211 Apr 13, 2016


Type Name Latest commit message Commit time
Failed to load latest commit information.
demos Adjust footer link Jun 23, 2015
docs Adjust footer link Jun 23, 2015
test Adjust site and add tests Feb 6, 2015
.nojekyll Add nojekyll Jun 7, 2015
.npmignore Rename folder Feb 20, 2015 Tweak the documentation Mar 24, 2016
bundle.js Adjust footer link Jun 23, 2015
index.html Adjust footer link Jun 23, 2015
index.js Basic UI layout Feb 13, 2015
package.json Rebuild links Jun 7, 2015
webpack.config.js Rebuild Jun 7, 2015


Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.

Getting Started

npm i --save colorable


Pass an array of color strings or an object with color strings as values.

var colorable = require('colorable')

var colors = {
  red: 'red',
  green: 'green',
  blue: 'blue'

var result = colorable(colors, { compact: true, threshold: 0 })

Returns an array of colors with combinations for all other colors and their WCAG contrast values.

    "hex": "#FF0000",
    "name": "red",
    "combinations": [
        "hex": "#008000",
        "name": "green",
        "contrast": 1.28483997166146,
        "accessibility": {
          "aa": false,
          "aaLarge": false,
          "aaa": false,
          "aaaLarge": false
        "hex": "#0000FF",
        "name": "blue",
        "contrast": 2.148936170212766,
        "accessibility": {
          "aa": false,
          "aaLarge": false,
          "aaa": false,
          "aaaLarge": false

Accessibility object

Each key is a boolean value indicating if the color contrast meets the following criteria:



Type: Boolean (default: false)

If set to true, the result will be a smaller object that only includes hex value color strings, a name for each color (if an object is passed to the function), contrast, and accessibility values. When set to false, the result also includes the entire harthur/color object for each color, which includes other properties and methods for color manipulation.


Type: Number (default: 0)

When set, the colorable function only returns combinations that have a contrast above this value. This is useful for only seeing combinations that pass a minimum contrast level.


Type: Boolean (default: true)

When set to true, the array of colors is passed through lodash.uniq to remove duplicates.

MIT License

You can’t perform that action at this time.