0.1.2 • Published 4 years ago
re-color-contrast v0.1.2
re-color-contrast
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.