IS Contrast Checker

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

1yarn add is-contrast-checker

Usage

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

1import isContrastChecker from 'is-contrast-checker';
2
3const colors = {
4  red: '#f00',
5  green: '#008000',
6  white: '#fff'
7}
8
9const result = isContrastChecker(colors)

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

1[
2  {
3    "hex": "#FF0000",
4    "name": "red",
5    "labelColor": "white",
6    "combinations": [
7      {
8        "hex": "#008000",
9        "name": "green",
10        "contrast": 1.28483997166146,
11        "accessibility": "Fail"
12      },
13      {
14        "hex": "#FFFFFF",
15        "name": "white",
16        "contrast": 3.9984767707539985,
17        "accessibility": "AA18"
18      }
19    ]
20  },
21  ...
22]

MIT License