@adobe/leonardo-contrast-colors

@adobe/leonardo-contrast-colors

This package contains all the functions for generating colors by target contrast ratio.

Using Leonardo

Installing

npm i @adobe/leonardo-contrast-colors

Pass your colors and desired ratios. See additional options below.

import { generateContrastColors } from '@adobe/leonardo-contrast-colors';

// returns rgb value
let colors = generateContrastColors({colorKeys: ["#ff00ff"], base: "#ffffff", ratios: [4.5]});

API Reference

generateContrastColors

Primary function used to generate colors based on target contrast ratios. Parameters are destructured and need to be explicitly called, such as colorKeys: ["#f26322"].

generateContrastColors({colorKeys, base, ratios, colorspace})

colorKeys [array]: list of colors referenced to generate a lightness scale. Much like key frames, key colors are single points by which additional colors will be interpolated between.

base string: references the color value that the color is to be generated from.

ratios [array]: list of numbers to be used as target contrast ratios.

colorspace string: the colorspace in which the key colors will be interpolated within. Below are the available options:

• Lch
• Lab
• CAM02
• HSL
• HSLuv
• HSV
• RGB

Why are not all contrast ratios available?

You may notice the tool takes an input (target ratio) but most often outputs a contrast ratio slightly higher. This has to do with the available colors in the RGB color space, and the math associated with calculating these ratios.

For example let's look at blue and white. Blue: rgb(0, 0, 255) White: rgb(255, 255, 255) Contrast ratio: 8.59:1

If we change any one value in the RGB channel for either color, the ratio changes: Blue: rgb(0, 1, 255) White: rgb(255, 255, 255) Contrast ratio: 8.57:1

If 8.58 is input as the target ratio with the starting color of blue, the output will not be exact. This is exaggerated by the various colorspace interpolations.

Since the WCAG requirement is defined as a minimum contrast requirement, it should be fine to generate colors that are a little more accessible than the minimum.

D3 Color

This project is currently built using D3 color. Although functionality is comparable to Chroma.js, the choice of D3 color is based on the additional modules available for state-of-the-art color appearance models, such as CIE CAM02.

The createScale() function is basically a wrapper function for creating a d3 linear scale for colors, with a few enhancements that aid in the generateContrastColors() function.

The Leonardo web app leverages d3 for additional features such as generating 2d and 3d charts.

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Development

You can run tests and watch for changes with:

yarn dev

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.