3.00
Fail
1.15
Fail
10.63
AAA
1.26
Fail
2.25
Fail
1.37
Fail
2.22
Fail
6.13
AA
1.56
Fail
3.57
Fail
1.15
Fail
2.44
Fail
1.49
Fail
1.56
Fail
12.12
AAA
1.15
Fail
3.00
Fail
3.45
Fail
3.55
Fail
2.37
Fail
1.33
Fail
2.18
Fail
1.35
Fail
2.05
Fail
1.92
Fail
1.19
Fail
3.44
Fail
1.23
Fail
2.01
Fail
4.67
AA
4.05
Fail
3.44
Fail
1.15
Fail
3.45
Fail
12.26
AAA
1.45
Fail
2.59
Fail
1.58
Fail
2.56
Fail
7.07
AAA
1.80
Fail
4.12
Fail
1.00
Fail
2.81
Fail
1.72
Fail
1.35
Fail
13.97
AAA
1.01
Fail
10.63
AAA
3.55
Fail
12.26
AAA
8.43
AAA
4.72
AA
7.75
AAA
4.78
AA
1.73
Fail
6.80
AA
2.97
Fail
12.22
AAA
4.37
Fail
7.13
AAA
16.56
AAA
1.14
Fail
12.20
AAA
1.26
Fail
2.37
Fail
1.45
Fail
8.43
AAA
1.78
Fail
1.09
Fail
1.76
Fail
4.86
AA
1.24
Fail
2.83
Fail
1.45
Fail
1.93
Fail
1.18
Fail
1.97
Fail
9.61
AAA
1.45
Fail
2.25
Fail
1.33
Fail
2.59
Fail
4.72
AA
1.78
Fail
1.64
Fail
1.01
Fail
2.72
Fail
1.44
Fail
1.59
Fail
2.59
Fail
1.08
Fail
1.51
Fail
3.51
Fail
5.39
AA
2.58
Fail
1.37
Fail
2.18
Fail
1.58
Fail
7.75
AAA
1.09
Fail
1.64
Fail
1.62
Fail
4.47
Fail
1.14
Fail
2.61
Fail
1.58
Fail
1.78
Fail
1.09
Fail
2.14
Fail
8.84
AAA
1.57
Fail
2.22
Fail
1.35
Fail
2.56
Fail
4.78
AA
1.76
Fail
1.01
Fail
1.62
Fail
2.76
Fail
1.42
Fail
1.61
Fail
2.56
Fail
1.10
Fail
1.49
Fail
3.46
Fail
5.45
AA
2.55
Fail
6.13
AA
2.05
Fail
7.07
AAA
1.73
Fail
4.86
AA
2.72
Fail
4.47
Fail
2.76
Fail
3.92
Fail
1.71
Fail
7.04
AAA
2.52
Fail
4.11
Fail
9.55
AAA
1.98
Fail
7.03
AAA
1.56
Fail
1.92
Fail
1.80
Fail
6.80
AA
1.24
Fail
1.44
Fail
1.14
Fail
1.42
Fail
3.92
Fail
2.29
Fail
1.80
Fail
1.56
Fail
1.05
Fail
2.44
Fail
7.75
AAA
1.79
Fail
3.57
Fail
1.19
Fail
4.12
Fail
2.97
Fail
2.83
Fail
1.59
Fail
2.61
Fail
1.61
Fail
1.71
Fail
2.29
Fail
4.11
Fail
1.47
Fail
2.40
Fail
5.57
AA
3.39
Fail
4.10
Fail
1.15
Fail
3.44
Fail
1.00
Fail
12.22
AAA
1.45
Fail
2.59
Fail
1.58
Fail
2.56
Fail
7.04
AAA
1.80
Fail
4.11
Fail
2.80
Fail
1.71
Fail
1.36
Fail
13.93
AAA
1.00
Fail
2.44
Fail
1.23
Fail
2.81
Fail
4.37
Fail
1.93
Fail
1.08
Fail
1.78
Fail
1.10
Fail
2.52
Fail
1.56
Fail
1.47
Fail
2.80
Fail
1.63
Fail
3.79
Fail
4.98
AA
2.79
Fail
1.49
Fail
2.01
Fail
1.72
Fail
7.13
AAA
1.18
Fail
1.51
Fail
1.09
Fail
1.49
Fail
4.11
Fail
1.05
Fail
2.40
Fail
1.71
Fail
1.63
Fail
2.32
Fail
8.13
AAA
1.71
Fail
1.56
Fail
4.67
AA
1.35
Fail
16.56
AAA
1.97
Fail
3.51
Fail
2.14
Fail
3.46
Fail
9.55
AAA
2.44
Fail
5.57
AA
1.36
Fail
3.79
Fail
2.32
Fail
18.88
AAA
1.36
Fail
12.12
AAA
4.05
Fail
13.97
AAA
1.14
Fail
9.61
AAA
5.39
AA
8.84
AAA
5.45
AA
1.98
Fail
7.75
AAA
3.39
Fail
13.93
AAA
4.98
AA
8.13
AAA
18.88
AAA
13.90
AAA
1.15
Fail
3.44
Fail
1.01
Fail
12.20
AAA
1.45
Fail
2.58
Fail
1.57
Fail
2.55
Fail
7.03
AAA
1.79
Fail
4.10
Fail
1.00
Fail
2.79
Fail
1.71
Fail
1.36
Fail
13.90
AAA

Colorable

Color combination contrast tester

Github NPM

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

Getting Started

npm install --save colorable

Usage

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 options = {
  compact: true,
  threshold: 4.5
};
var result = colorable(colors, options);

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:


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 harthur/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.

Example: 4.5 Threshold (Level AA)

10.63
AAA
6.13
AA
12.12
AAA
4.67
AA
12.26
AAA
7.07
AAA
13.97
AAA
10.63
AAA
12.26
AAA
8.43
AAA
4.72
AA
7.75
AAA
4.78
AA
6.80
AA
12.22
AAA
7.13
AAA
16.56
AAA
12.20
AAA
8.43
AAA
4.86
AA
9.61
AAA
4.72
AA
5.39
AA
7.75
AAA
8.84
AAA
4.78
AA
5.45
AA
6.13
AA
7.07
AAA
4.86
AA
7.04
AAA
9.55
AAA
7.03
AAA
6.80
AA
7.75
AAA
5.57
AA
12.22
AAA
7.04
AAA
13.93
AAA
4.98
AA
7.13
AAA
8.13
AAA
4.67
AA
16.56
AAA
9.55
AAA
5.57
AA
18.88
AAA
12.12
AAA
13.97
AAA
9.61
AAA
5.39
AA
8.84
AAA
5.45
AA
7.75
AAA
13.93
AAA
4.98
AA
8.13
AAA
18.88
AAA
13.90
AAA
12.20
AAA
7.03
AAA
13.90
AAA

Colors from mrmrs/colors