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.
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%.
$ npm i font-color-contrast
To see the full usage and examples access the demo site.
Tests made using Jest.
JavaScript version, accepting strings for RGB
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.
Updated the algorithm from https://alienryderflex.com/hsp.html with new thresholds for better contrast.
Included the optional threshold parameter (thanks, franciscohanna92).
Changed target to ES2015
Fixed package installation from the new TS version
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.
Checking if the color numbers are integer.