contrast


Analyse luminosity contrast ratio

Installation

Run npm install @smockle/contrast to add contrast to your project.

Usage

$3

``sh


Hexadecimal colors

$ contrast "#000000" "#FFFFFF"

Shorthand hexadecimal colors

$ contrast "#000" "#FC0"
# equivalent to $ contrast "#000000" "#FFCC00"
$ contrast "#000" "#F8"
# equivalent to $ contrast "#000000" "#F8F8F8"

Named colors

$ contrast black white
`

$3

`TypeScript
import { Contrast } from "@smockle/contrast";

// Hexadecimal colors
new Contrast("#000000", "#FFFFFF");
// => {
// foreground: {
// value: "000000",
// R: { value: "00" },
// G: { value: "00" },
// B: { value: "00" },
// },
// background: {
// value: "FFFFFF",
// R: { value: "FF" },
// G: { value: "FF" },
// B: { value: "FF" },
// },
// value: 21,
// }

// Shorthand hexadecimal colors
new Contrast("#000", "#FC0");
// equivalent to new Contrast("#000000", "#FFCC00")
new Contrast("#000", "#F8");
// equivalent to new Contrast("#000000", "#F8F8F8")

// Named colors
new Contrast("black", "white");
`

Testing

contrast includes several unit tests. After cloning the contrast repo locally, run npm install in the project folder to install dependencies. Run npm test` to execute the tests.

References

- http://juicystudio.com/article/luminositycontrastratioalgorithm.php
- https://www.w3.org/TR/WCAG20/#contrast-ratiodef
- https://www.w3.org/TR/WCAG20/#relativeluminancedef
- https://www.w3.org/Graphics/Color/sRGB.html
- https://stackoverflow.com/a/12894053/1923134