Pick-a-good-color NPM

pick-a-good-color

Choose the boldest and most accessible color for a given background.

Installation

npm install pick-a-good-color --save

Usage

Given an array of colors, this function will attempt to find the most saturated color that meets the recommended WCAG contrast ratio of 4.5:1. If none of the given colors meet the criteria, then the most saturated color in the array will be adjusted to meet the contrast requirements using the make-color-accessible module.

By default, this module will pick a color that will work on a white background:

const pick = require('pick-a-good-color')
const colors = ['#DB1AC2', '#C70C4D', '#6B0964', '#5D2BD6', '#088C00']
const goodColor = pick(colors)
// => #C70C4D

If you need a color that will work on a black background, set the background option:

const goodColor = pick(colors, {background: 'black'})

For large text, the WCAG recommends a lower minimum ratio of 3:1. To change the minimum required contrast, set the contrast option:

const goodColor = pick(colors, {contrast: 3})

API

`pickAGoodColor(colors[, options])`

colors - An array of hex strings, html color names like black or white, or any other input accepted by the color2 module. (required)
options - An object. Optional.
- contrast - A number representing the minimum required contrast ratio between options.background and a color in the colors argument. Defaults to the WCAG recommendation of 4.5. Can be any number between 1 and 21.
- background - A hex string, html color name like black or white, or any other input accepted by the color2 module. Defaults to white.

Tests

npm install
npm test

Dependencies

color2: Stateful implementation of color
lodash: Lodash modular utilities.
make-color-accessible: produce colors that meet web content accessibility guidelines

Dev Dependencies

budo: a browserify server for rapid prototyping
chai: BDD/TDD assertion library for node.js and the browser. Test framework agnostic.
electron-apps: A collection of apps built on Electron
mocha: simple, flexible, fun test framework
standard: JavaScript Standard Style
standard-markdown: Test your Markdown files for Standard JavaScript Style™
yo-yo: A tiny library for building modular UI components using DOM diffing and ES6 tagged template literals