Get the contrast ratio and WCAG score between common CSS color types in order to ensure accessibility
JavaScript
Latest commit 0bb8c05 Jul 22, 2016 @johnotander Update compositor.json
Permalink
Failed to load latest commit information.
.gitignore Initial commit Dec 11, 2014
.travis.yml Add new nodes May 2, 2016
cli.js Add cli Feb 16, 2015
compositor.json Update compositor.json Jul 22, 2016
index.js Modernize module May 2, 2016
license Modernize module May 2, 2016
package.json 2.0.0 May 2, 2016
readme.md Modernize module May 2, 2016
test.js Use ava May 2, 2016

readme.md

get-contrast Build Status

Get the contrast ratio and WCAG score between common CSS color types. This also includes an is accessible method that returns a boolean value based on W3C Accessibility Standards.

It has the ability to handle rgb, rgba, hex, hsl, hsla, and named CSS colors.

Installation

npm i --save get-contrast

Usage

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

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.

Acknowledgements

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

Crafted with <3 by John Otander (@4lpine).