re-color-contrast

ReScript library to 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 fulfills the WCAG success criterion for color contrast.

Getting started

npm install re-color-contrast

Then add re-color-contrast as a dependency to rescript.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 two hex color strings and returns a float in the range [1..21]. 1 is no contrast, 21 is maximum contrast. See WCAG contrast ratio definition for details.
• getRelativeLuminance(string) => float — takes a hex color string and returns a float in the range [0..1]. 0 is no luminance, 1 is maximum luminance. See WCAG relative luminance definition for details.

Both 3-character (#rgb) and 6-character (#rrggbb) hex strings are supported.

Alternatives

• rescript-tinycolor has accessibility functions that do contrast checking and more
• color-contrast is a JS library with the same functionality, but also accepts other input formats (not only hex)

Contribute

If you find bugs or want to improve this library, feel free to open an issue or PR. Try to adhere to Conventional Commits.