font-color-contrast
Advanced tools
JavaScript module to use black or white font according to the given background color
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.
FAQs
JavaScript module to use black or white font according to the given background color
The npm package font-color-contrast receives a total of 29,057 weekly downloads. As such, font-color-contrast popularity was classified as popular.
We found that font-color-contrast demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.