re-color-contrast

0.1.2 • Public • Published

re-color-contrast

Build Status

Calculate color contrast of two colors. The result is a number between 1.0 and 21.0, and can be used to determine if contrast fullfills WCAG success criterion for color contrast.

Getting started

yarn add re-color-contrast

Then add re-color-contrast as a dependency to bsconfig.json:

"bs-dependencies": [
+  "re-color-contrast"
]

Example

open ReColorContrast;

let blue = "#00f";
let green = "#00ff00";

ColorContrast.getContrast(blue, green); // 6.2618 ...

ColorContrast.getRelativeLuminance(blue); // 0.0722

API

  • getContrast(string, string) => float - takes in two hex color strings and returns a float in range [1..21]. 1 is no contrast, and 21 is best contrast (colors of opposing side of spectrum). See WCAG for details on calculation.
  • getRelativeLuminance(string) => float - takes in a hex color string and returns a float in range [0..1]. 0 is no luminance and 1 is max. See WCAG for details on calculation.

Alternatives

  • bs-tinycolor has accessibility functions that does contrast checking and more
  • color-contrast is a JS library with same functionality as this library, but does also accepts all kinds of input formats (not only hex)

Contribute

  • If you find bugs or want to improve this library, feel free to open an issue or PR.
  • If you are upgrading any dependencies, please use yarn so yarn.lock is updated.
  • Try to adhere to Angular commit guidelines.

Package Sidebar

Install

npm i re-color-contrast

Weekly Downloads

1

Version

0.1.2

License

MIT

Unpacked Size

8.39 kB

Total Files

8

Last publish

Collaborators

  • mikaello