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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

bed0c16 · May 20, 2024

History

72 Commits
Dec 24, 2023
Dec 15, 2023
Dec 24, 2023
Dec 24, 2023
Dec 24, 2023
Dec 6, 2023
May 20, 2024
Dec 15, 2023
May 20, 2024
Nov 23, 2023
Dec 24, 2023
May 20, 2024
May 20, 2024
May 20, 2024
May 20, 2024

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