contrast-ts

Contrasted colors generator, can also set luminance of a specified color.

Install

npm install contrast-ts

Usage

generateContrastedColors({ options })

generateContrastedColors lets you generate an array of 2 colors with a minimum set WCAG contrast. Main color needs to be specified. A secondary one can be specified as well but, while being the better choice, isn't necessary.

import { generateContrastedColors } from "contrast-ts";

const contrastedColors = generateContrastedColors({
  mainColor: "royalblue",
  secondaryColor: "rgb(128 69 42)",
  minWcagContrast: 10,
  priority: "main",
  output: "rgb",
  format: "css",
});
// returns [ 'rgb(24, 51, 168)', 'rgb(255, 255, 255)' ]

mainColor and secondaryColor (optional) parameters :

They both accept as values:

• a Color object (https://culorijs.org/color-spaces/)
• a named color (https://drafts.csswg.org/css-color/#named-colors)
• a CSS color (https://drafts.csswg.org/css-color/#typedef-color)

minWcagContrast (optional) parameter:

Represent the minimum contrast goal for the generated colors, accepts a number as a value, clamped between 0 and 21. Default to 7.

priority (optional) parameter:

Accepts "main", "secondary" and "both" as values. Can only be set if a secondaryColor has been inputed.

• "main": will try to preserve mainColor by setting secondaryColor's relative luminance first. If it's not enough, mainColor's relative luminance is set to match the minimum contrast ratio.
• "secondary": same as "main" but for secondaryColor.
• "both": decrease darkest color's relative luminance and raise the other one to meet the minimum contrast ratio.

output (optional) parameter:

Accepts these values: "rgb" | "a98" | "hsl" | "hwb" | "lab" | "lch" | "lrgb" | "oklab" | "oklch" | "p3" | "prophoto" | "rec2020" | "xyz50" | "xyz65" | "hex"

format (optional) parameter:

Accepts "css" and "object" as values.

• "css": returns a CSS ready string to be used as a <color>
• "object": returns a Color object (https://culorijs.org/color-spaces/)

setLuminance(color, luminanceGoal, { options })

setLuminance lets you change the WCAG relative luminance of a color to a specified amount.

import { setLuminance } from "contrast-ts";

const blueAt0dot5Luminance = setLuminance("rgb(0 0 255)", 0.5, {
  output: "rgb",
  format: "css",
});
// returns "rgb(154, 188, 255)"

color parameter :

Accepts as values:

• a Color object (https://culorijs.org/color-spaces/)
• a named color (https://drafts.csswg.org/css-color/#named-colors)
• a CSS color (https://drafts.csswg.org/css-color/#typedef-color)

luminanceGoal parameter:

Accepts a number representing the WCAG relative luminance goal for the new color, clamped between 0 and 1.

options (optional) parameter:

output (optional) parameter:

Accepts these values: "rgb" | "a98" | "hsl" | "hwb" | "lab" | "lch" | "lrgb" | "oklab" | "oklch" | "p3" | "prophoto" | "rec2020" | "xyz50" | "xyz65" | "hex"

format (optional) parameter:

Accepts "css" and "object" as values.

• "css": returns a CSS ready string to be used as a <color>
• "object": returns a Color object (https://culorijs.org/color-spaces/)