wcagpalette

wcagpalette is a color conversion library for JavaScript and node.

This library provides a method for finding a color with a specific contrast ratio to another color and that matches the hue and saturation of the first.

Example

const { getContrastingHex } = require('wcagpalette');

const hex1 = getContrastingHex("#7524B7", "#7524B7", 4.5);
const hex2 = getContrastingHex("#7524B7", "#7524B7", "AA_text");

// hex1 = hex2 = "#D9BBF2" (contrast ratio = 4.58)
// the next lighter shade is "#DFBFF3" (contrast ratio = 4.79)
// the next darker shade is "#DAB6F1" (contrast ratio = 4.44)

const hex3 = getContrastingHex("#6D6D6D", 7);

// hex3 = null
// #000000 (black) has a contrast ratio of 4.05
// #FFFFFF (white) has a contrast ratio of 5.17
// thus, no color has sufficient contrast

API

getContrastingHex(color, contrastRatio)

Params

fixedColor

• definition: the color you want to contrast against
• type: string
• pattern: /^#[\da-fA-F]{6}/
• examples: "#db1f90", "#ffffff", "#123456"

alterColor

• definition: the color you want to be altered into a lighter/darker color with the same hue and saturation
• type: string
• pattern: /^#[\da-fA-F]{6}/
• examples: "#db1f90", "#ffffff", "#123456"

contrastRatio

• definition: the minimum contrast ration between your fixedColor and the function's output color see w3 glossary definition here
• type: number | string
• default value: "AA" (equivilent to 3)
• examples: 3, "AA", "AA_text", "AA_text_large", "AAA_text", "AAA_text_large";

Install

$ npm install wcagpalette

Contribute

If there is a new methods you would like to support, please make a pull request or reach out.

License

Licensed under the MIT License.

More info

• https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
• https://www.w3.org/WAI/WCAG21/Techniques/general/G18
• https://webaim.org/resources/contrastchecker/