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

1const contrast = require("get-contrast");
2
3contrast.ratio("#fafafa", "rgba(0,0,0,.75)"); // => 10
4contrast.score("#fafafa", "rgba(0,0,0,.75)"); // => 'AAA'
5contrast.isAccessible("#fafafa", "rgba(0,0,0,.75)"); // => true
6contrast.isAccessible("#fafafa", "#fff"); // => false
7contrast.score("rebeccapurple", "tomato"); // => 'F'

Options

• ignoreAlpha (default: false) - Don't raise an error when transparent values are passed (rgba(0, 0, 0, 0))

1contrast.score("rgba(0, 0, 0, 0)", "rgba(255, 255, 255, 0)", {
2  ignoreAlpha: true,
3}); // => 'AAA'

CLI

This module includes a command line interface contrast.

1$ npm i get-contrast -g
2$ contrast "#000" "#fff"
3Ratio: 21
4Score: AAA
5# The second parameter defaults to #fff
6$ contrast white
7Ratio: 1
8Score: F
9The contrast is not accessible.
10# Contrast will exit with an error code, when the values are not accessible.
11$ contrast "#ff0" "#fff" && ./deploy.sh
12Ratio: 1.0738392309265699
13Score: F
14The contrast is not accessible.

Related

Uses the following packages:

• https://github.com/tmcw/wcag-contrast
• https://github.com/kamicane/rgb

Inspired by:

• https://leaverou.github.com/contrast-ratio

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).