font-color-contrast

font-color-contrast is a JavaScript module to help you select black or white for a font according to the brightness of the background color to give you the best possible contrast.

How does it work

font-color-contrast uses the algorithm described in the article HSP Color Model — Alternative to HSV (HSB) and HSL where brightness is described as

Any brightness smaller than 50% means the background is dark.

Any brightness bigger than 50% means the background is light.

This way, font-color-contrast will (with the default threshold of 0.5) return white ('#ffffff') for dark brightness and black ('#000000') for light brightness.

You can change this behaviour by passing the optional threshold parameter, so the comparison will be with the value you passed, not with 50%.

Installation

$ npm i font-color-contrast

Usage & Examples

To see the full usage and examples access the demo site.

Tests and coverage

Tests made using Jest.

Version history

0 -> 8.1.1

JavaScript version, accepting strings for RGB

9.0.0 -> 9.0.2

TypeScript version.

Only numbers are now accepted as params when using array or RGB because it was impossible to know if the string was decimal or hexadecimal. Accepting only numbers we can be sure the correct values are being used to calculate the contrast.

9.1.0

Updated the algorithm from https://alienryderflex.com/hsp.html with new thresholds for better contrast.

10.0.0

Included the optional threshold parameter (thanks, franciscohanna92).

10.0.1

Changed target to ES2015

10.1.0

Fixed package installation from the new TS version

11.0.0

Many improved checks to make sure the color is a valid set color and recreated all tests. The function now encapsulates a function in a class.

CSS named colors can now be passed as a param.

11.1.0

Checking if the color numbers are integer.