is-contrast-checker

1.0.5 • Public • Published

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

yarn add is-contrast-checker

Usage

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

import isContrastChecker from 'is-contrast-checker';
 
const colors = {
  red: '#f00',
  green: '#008000',
  white: '#fff'
}
 
const result = isContrastChecker(colors)

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

[
  {
    "hex": "#FF0000",
    "name": "red",
    "labelColor": "white",
    "combinations": [
      {
        "hex": "#008000",
        "name": "green",
        "contrast": 1.28483997166146,
        "accessibility": "Fail"
      },
      {
        "hex": "#FFFFFF",
        "name": "white",
        "contrast": 3.9984767707539985,
        "accessibility": "AA18"
      }
    ]
  },
  ...
]

MIT License

Package Sidebar

Install

npm i is-contrast-checker

Weekly Downloads

84

Version

1.0.5

License

MIT

Unpacked Size

2.94 kB

Total Files

4

Last publish

Collaborators

  • jameelmoses