@xotic750/colorable

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

Usage

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

import colorable from 'colorable';

const colors = {
  red: 'red',
  green: 'green',
  blue: 'blue',
};

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

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

[
  {
    "combinations": [
      {
        "contrastRatio": 1.6725321577860943,
        "hexColor": "#008000",
        "name": "green",
        "accessibility": {
          "aa": false,
          "aaa": false,
          "aaaLarge": false,
          "aaLarge": false
        },
        "model": "rgb",
        "color": [0, 128, 0],
        "valpha": 1
      },
      {
        "contrastRatio": 2.148936170212766,
        "hexColor": "#FF0000",
        "name": "red",
        "accessibility": {
          "aa": false,
          "aaa": false,
          "aaaLarge": false,
          "aaLarge": false
        },
        "model": "rgb",
        "color": [255, 0, 0],
        "valpha": 1
      }
    ],
    "hexColor": "#0000FF",
    "name": "blue",
    "model": "rgb",
    "color": [0, 0, 255],
    "valpha": 1
  },
  {
    "combinations": [
      {
        "contrastRatio": 1.6725321577860943,
        "hexColor": "#0000FF",
        "name": "blue",
        "accessibility": {
          "aa": false,
          "aaa": false,
          "aaaLarge": false,
          "aaLarge": false
        },
        "model": "rgb",
        "color": [0, 0, 255],
        "valpha": 1
      },
      {
        "contrastRatio": 1.28483997166146,
        "hexColor": "#FF0000",
        "name": "red",
        "accessibility": {
          "aa": false,
          "aaa": false,
          "aaaLarge": false,
          "aaLarge": false
        },
        "model": "rgb",
        "color": [255, 0, 0],
        "valpha": 1
      }
    ],
    "hexColor": "#008000",
    "name": "green",
    "model": "rgb",
    "color": [0, 128, 0],
    "valpha": 1
  },
  {
    "combinations": [
      {
        "contrastRatio": 2.148936170212766,
        "hexColor": "#0000FF",
        "name": "blue",
        "accessibility": {
          "aa": false,
          "aaa": false,
          "aaaLarge": false,
          "aaLarge": false
        },
        "model": "rgb",
        "color": [0, 0, 255],
        "valpha": 1
      },
      {
        "contrastRatio": 1.28483997166146,
        "hexColor": "#008000",
        "name": "green",
        "accessibility": {
          "aa": false,
          "aaa": false,
          "aaaLarge": false,
          "aaLarge": false
        },
        "model": "rgb",
        "color": [0, 128, 0],
        "valpha": 1
      }
    ],
    "hexColor": "#FF0000",
    "name": "red",
    "model": "rgb",
    "color": [255, 0, 0],
    "valpha": 1
  }
]

Accessibility object

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

• aa - greater than 4.5 (for normal sized text)
• aaLarge - greater than 3 (for bold text or text larger than 24px)
• aaa - greater than 7
• aaaLarge - greater than 4.5

Options

compact

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 Qix-/color object for each color, which includes other properties and methods for color manipulation.

threshold

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.

uniq

Type: Boolean (default: true)

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

MIT License