Skip to content

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

Notifications You must be signed in to change notification settings

colorjs/pick-a-good-color

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

pick-a-good-color

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

electron app icon colors

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

Dependencies

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

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published