Skip to content

Generate a color that is readabe on a given background

License

Notifications You must be signed in to change notification settings

exhuma/readable-color

Repository files navigation

readable-color

The project provides a function to determine a color that - according to established algorithms - should be easily readable on a given background.

Example use-case: You want to display text on a GUI element with an unknown background color f.ex. if the user can pick the color or if the color is generated from other values.

The project exposes four algorithms/methods:

See demo at https://codepen.io/Michel-Albert/pen/eYxrXeG

The library shifts the "lightness" of the background-color until a readable value is found. If none is found, it will stop at either "full-black" or "full-white". This latter "cutoff" may lead to colors that are still unreadable in edge-cases, depending on the chosen method.

NOTE: The best results have so far been achieved with the W3C and WCAG methods. The others are still present for backwards-compatibility and reference.

Example:

import { getReadableColor } from "@exhuma/readable-color";

// Get a readable color with the default method.
const readableColor = getReadableColor("#123456");

// example using another method.
const anotherColor = getReadableColor("#123456", "WCAG");

const theElement = document.getElementById("my-element");
theElement.style.color = readableColor;

Development

To install dependencies:

npm install

To build:

npm run build

To run a dev-server:

npm run dev

Then access: http://localhost:5173/src/index.html

About

Generate a color that is readabe on a given background

Resources

License

Stars

Watchers

Forks

Packages

No packages published