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

See Also

• leaverou.github.io/contrast-ratio - A tool to calculate the contrast ratio between any two valid CSS colors.

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

License

MIT