Colorable

Color combination contrast tester

Github NPM
3.00
#0074D9
1.15
#01FF70
10.63
#001F3F
AAA
1.26
#39CCCC
2.25
#3D9970
1.37
#2ECC40
2.22
#FF4136
6.13
#85144B
AA
1.56
#FF851B
3.57
#B10DC9
1.15
#FFDC00
2.44
#F012BE
1.49
#AAAAAA
1.56
#FFFFFF
12.12
#111111
AAA
1.15
#DDDDDD
3.00
#7FDBFF
3.45
#01FF70
3.55
#001F3F
2.37
#39CCCC
1.33
#3D9970
2.18
#2ECC40
1.35
#FF4136
2.05
#85144B
1.92
#FF851B
1.19
#B10DC9
3.44
#FFDC00
1.23
#F012BE
2.01
#AAAAAA
4.67
#FFFFFF
AA
4.05
#111111
3.44
#DDDDDD
1.15
#7FDBFF
3.45
#0074D9
12.26
#001F3F
AAA
1.45
#39CCCC
2.59
#3D9970
1.58
#2ECC40
2.56
#FF4136
7.07
#85144B
AAA
1.80
#FF851B
4.12
#B10DC9
1.00
#FFDC00
2.81
#F012BE
1.72
#AAAAAA
1.35
#FFFFFF
13.97
#111111
AAA
1.01
#DDDDDD
10.63
#7FDBFF
AAA
3.55
#0074D9
12.26
#01FF70
AAA
8.43
#39CCCC
AAA
4.72
#3D9970
AA
7.75
#2ECC40
AAA
4.78
#FF4136
AA
1.73
#85144B
6.80
#FF851B
AA
2.97
#B10DC9
12.22
#FFDC00
AAA
4.37
#F012BE
7.13
#AAAAAA
AAA
16.56
#FFFFFF
AAA
1.14
#111111
12.20
#DDDDDD
AAA
1.26
#7FDBFF
2.37
#0074D9
1.45
#01FF70
8.43
#001F3F
AAA
1.78
#3D9970
1.09
#2ECC40
1.76
#FF4136
4.86
#85144B
AA
1.24
#FF851B
2.83
#B10DC9
1.45
#FFDC00
1.93
#F012BE
1.18
#AAAAAA
1.97
#FFFFFF
9.61
#111111
AAA
1.45
#DDDDDD
2.25
#7FDBFF
1.33
#0074D9
2.59
#01FF70
4.72
#001F3F
AA
1.78
#39CCCC
1.64
#2ECC40
1.01
#FF4136
2.72
#85144B
1.44
#FF851B
1.59
#B10DC9
2.59
#FFDC00
1.08
#F012BE
1.51
#AAAAAA
3.51
#FFFFFF
5.39
#111111
AA
2.58
#DDDDDD
1.37
#7FDBFF
2.18
#0074D9
1.58
#01FF70
7.75
#001F3F
AAA
1.09
#39CCCC
1.64
#3D9970
1.62
#FF4136
4.47
#85144B
1.14
#FF851B
2.61
#B10DC9
1.58
#FFDC00
1.78
#F012BE
1.09
#AAAAAA
2.14
#FFFFFF
8.84
#111111
AAA
1.57
#DDDDDD
2.22
#7FDBFF
1.35
#0074D9
2.56
#01FF70
4.78
#001F3F
AA
1.76
#39CCCC
1.01
#3D9970
1.62
#2ECC40
2.76
#85144B
1.42
#FF851B
1.61
#B10DC9
2.56
#FFDC00
1.10
#F012BE
1.49
#AAAAAA
3.46
#FFFFFF
5.45
#111111
AA
2.55
#DDDDDD
6.13
#7FDBFF
AA
2.05
#0074D9
7.07
#01FF70
AAA
1.73
#001F3F
4.86
#39CCCC
AA
2.72
#3D9970
4.47
#2ECC40
2.76
#FF4136
3.92
#FF851B
1.71
#B10DC9
7.04
#FFDC00
AAA
2.52
#F012BE
4.11
#AAAAAA
9.55
#FFFFFF
AAA
1.98
#111111
7.03
#DDDDDD
AAA
1.56
#7FDBFF
1.92
#0074D9
1.80
#01FF70
6.80
#001F3F
AA
1.24
#39CCCC
1.44
#3D9970
1.14
#2ECC40
1.42
#FF4136
3.92
#85144B
2.29
#B10DC9
1.80
#FFDC00
1.56
#F012BE
1.05
#AAAAAA
2.44
#FFFFFF
7.75
#111111
AAA
1.79
#DDDDDD
3.57
#7FDBFF
1.19
#0074D9
4.12
#01FF70
2.97
#001F3F
2.83
#39CCCC
1.59
#3D9970
2.61
#2ECC40
1.61
#FF4136
1.71
#85144B
2.29
#FF851B
4.11
#FFDC00
1.47
#F012BE
2.40
#AAAAAA
5.57
#FFFFFF
AA
3.39
#111111
4.10
#DDDDDD
1.15
#7FDBFF
3.44
#0074D9
1.00
#01FF70
12.22
#001F3F
AAA
1.45
#39CCCC
2.59
#3D9970
1.58
#2ECC40
2.56
#FF4136
7.04
#85144B
AAA
1.80
#FF851B
4.11
#B10DC9
2.80
#F012BE
1.71
#AAAAAA
1.36
#FFFFFF
13.93
#111111
AAA
1.00
#DDDDDD
2.44
#7FDBFF
1.23
#0074D9
2.81
#01FF70
4.37
#001F3F
1.93
#39CCCC
1.08
#3D9970
1.78
#2ECC40
1.10
#FF4136
2.52
#85144B
1.56
#FF851B
1.47
#B10DC9
2.80
#FFDC00
1.63
#AAAAAA
3.79
#FFFFFF
4.98
#111111
AA
2.79
#DDDDDD
1.49
#7FDBFF
2.01
#0074D9
1.72
#01FF70
7.13
#001F3F
AAA
1.18
#39CCCC
1.51
#3D9970
1.09
#2ECC40
1.49
#FF4136
4.11
#85144B
1.05
#FF851B
2.40
#B10DC9
1.71
#FFDC00
1.63
#F012BE
2.32
#FFFFFF
8.13
#111111
AAA
1.71
#DDDDDD
1.56
#7FDBFF
4.67
#0074D9
AA
1.35
#01FF70
16.56
#001F3F
AAA
1.97
#39CCCC
3.51
#3D9970
2.14
#2ECC40
3.46
#FF4136
9.55
#85144B
AAA
2.44
#FF851B
5.57
#B10DC9
AA
1.36
#FFDC00
3.79
#F012BE
2.32
#AAAAAA
18.88
#111111
AAA
1.36
#DDDDDD
12.12
#7FDBFF
AAA
4.05
#0074D9
13.97
#01FF70
AAA
1.14
#001F3F
9.61
#39CCCC
AAA
5.39
#3D9970
AA
8.84
#2ECC40
AAA
5.45
#FF4136
AA
1.98
#85144B
7.75
#FF851B
AAA
3.39
#B10DC9
13.93
#FFDC00
AAA
4.98
#F012BE
AA
8.13
#AAAAAA
AAA
18.88
#FFFFFF
AAA
13.90
#DDDDDD
AAA
1.15
#7FDBFF
3.44
#0074D9
1.01
#01FF70
12.20
#001F3F
AAA
1.45
#39CCCC
2.58
#3D9970
1.57
#2ECC40
2.55
#FF4136
7.03
#85144B
AAA
1.79
#FF851B
4.10
#B10DC9
1.00
#FFDC00
2.79
#F012BE
1.71
#AAAAAA
1.36
#FFFFFF
13.90
#111111
AAA

Colors from mrmrs/colors

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
#001F3F
AAA
6.13
#85144B
AA
12.12
#111111
AAA
4.67
#FFFFFF
AA
12.26
#001F3F
AAA
7.07
#85144B
AAA
13.97
#111111
AAA
10.63
#7FDBFF
AAA
12.26
#01FF70
AAA
8.43
#39CCCC
AAA
4.72
#3D9970
AA
7.75
#2ECC40
AAA
4.78
#FF4136
AA
6.80
#FF851B
AA
12.22
#FFDC00
AAA
7.13
#AAAAAA
AAA
16.56
#FFFFFF
AAA
12.20
#DDDDDD
AAA
8.43
#001F3F
AAA
4.86
#85144B
AA
9.61
#111111
AAA
4.72
#001F3F
AA
5.39
#111111
AA
7.75
#001F3F
AAA
8.84
#111111
AAA
4.78
#001F3F
AA
5.45
#111111
AA
6.13
#7FDBFF
AA
7.07
#01FF70
AAA
4.86
#39CCCC
AA
7.04
#FFDC00
AAA
9.55
#FFFFFF
AAA
7.03
#DDDDDD
AAA
6.80
#001F3F
AA
7.75
#111111
AAA
5.57
#FFFFFF
AA
12.22
#001F3F
AAA
7.04
#85144B
AAA
13.93
#111111
AAA
4.98
#111111
AA
7.13
#001F3F
AAA
8.13
#111111
AAA
4.67
#0074D9
AA
16.56
#001F3F
AAA
9.55
#85144B
AAA
5.57
#B10DC9
AA
18.88
#111111
AAA
12.12
#7FDBFF
AAA
13.97
#01FF70
AAA
9.61
#39CCCC
AAA
5.39
#3D9970
AA
8.84
#2ECC40
AAA
5.45
#FF4136
AA
7.75
#FF851B
AAA
13.93
#FFDC00
AAA
4.98
#F012BE
AA
8.13
#AAAAAA
AAA
18.88
#FFFFFF
AAA
13.90
#DDDDDD
AAA
12.20
#001F3F
AAA
7.03
#85144B
AAA
13.90
#111111
AAA