JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6216
  • Score
    100M100P100Q122127F
  • License MIT

Get the contrast ratio and WCAG score between common CSS color types.

Package Exports

  • get-contrast

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (get-contrast) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

get-contrast

Get the contrast ratio and WCAG score for two colors based on W3C Accessibility Standards. It handles rgb, rgba, hex, hsl, hsla, and named CSS colors.

Installation

npm i --save get-contrast
# yarn add get-contrast

Usage

const contrast = require("get-contrast");

contrast.ratio("#fafafa", "rgba(0,0,0,.75)"); // => 10
contrast.score("#fafafa", "rgba(0,0,0,.75)"); // => 'AAA'
contrast.isAccessible("#fafafa", "rgba(0,0,0,.75)"); // => true
contrast.isAccessible("#fafafa", "#fff"); // => false
contrast.score("rebeccapurple", "tomato"); // => 'F'

Options

  • ignoreAlpha (default: false) - Don't raise an error when transparent values are passed (rgba(0, 0, 0, 0))
contrast.score("rgba(0, 0, 0, 0)", "rgba(255, 255, 255, 0)", {
  ignoreAlpha: true,
}); // => 'AAA'

CLI

This module includes a command line interface contrast.

$ npm i get-contrast -g
$ contrast "#000" "#fff"
Ratio: 21
Score: AAA
# The second parameter defaults to #fff
$ contrast white
Ratio: 1
Score: F
The contrast is not accessible.
# Contrast will exit with an error code, when the values are not accessible.
$ contrast "#ff0" "#fff" && ./deploy.sh
Ratio: 1.0738392309265699
Score: F
The contrast is not accessible.

Uses the following packages:

Inspired by:

License

MIT

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Authored by John Otander (@4lpine).