Get the contrast ratio and WCAG score between two colors in order to ensure accessibility
MIT License
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.
npm i --save get-contrast
# yarn add get-contrast
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'
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'
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:
MIT
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)Authored by John Otander (@4lpine).