# font-color-contrast > JavaScript module to use black or white font according to the given background color Latest version **11.1.0** (published 2022-02-08) · MIT license · 0 weekly downloads ## Install ```sh npm install font-color-contrast pnpm add font-color-contrast yarn add font-color-contrast bun add font-color-contrast ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 11.1.0 | | Published | 2022-02-08 | | First published | 2016-06-07 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 59.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 35 | | Author | Eduardo Russo | | Maintainers | russoedu | | Keywords | color, contrast, font, background | ## Links - npm: https://www.npmjs.com/package/font-color-contrast - Repository: https://github.com/russoedu/font-color-contrast - Homepage: https://github.com/russoedu/font-color-contrast#readme - Issues: https://github.com/russoedu/font-color-contrast/issues - npm.io page: https://npm.io/package/font-color-contrast ## Alternatives - [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads - [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads - [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads - [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads - [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads ## Recent versions - 11.1.0 (latest) — 2022-02-08 - 11.0.0 — 2022-02-02 - 10.1.0 — 2021-11-05 - 10.0.1 — 2021-11-04 - 10.0.0 — 2021-11-03 - 9.1.0 — 2021-11-02 - 9.0.2 — 2021-10-31 - 9.0.1 — 2021-10-31 - 9.0.0 — 2021-10-30 - 1.1.1 — 2021-07-04 - 1.0.3 — 2016-06-07 - 1.0.2 — 2016-06-07 - 1.0.1 — 2016-06-07 - 1.0.0 — 2016-06-07 ## README # font-color-contrast [![npm](https://img.shields.io/npm/v/font-color-contrast.svg)](https://www.npmjs.com/package/font-color-contrast) [![CI Pipeline](https://github.com/russoedu/font-color-contrast/actions/workflows/main.yml/badge.svg)](https://github.com/russoedu/font-color-contrast/actions/workflows/main.yml) [![Build Status](https://scrutinizer-ci.com/g/russoedu/font-color-contrast/badges/build.png?b=master)](https://scrutinizer-ci.com/g/russoedu/font-color-contrast/build-status/master) [![Coverage Status](https://coveralls.io/repos/github/russoedu/font-color-contrast/badge.svg?branch=master)](https://coveralls.io/github/russoedu/font-color-contrast?branch=master) [![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/russoedu/font-color-contrast/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/russoedu/font-color-contrast/?branch=master) [![Code Climate](https://codeclimate.com/github/dwyl/esta/badges/gpa.svg)](https://codeclimate.com/github/russoedu/font-color-contrast) [![Known Vulnerabilities](https://snyk.io/test/npm/font-color-contrast/badge.svg)](https://snyk.io/test/npm/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](https://alienryderflex.com/hsp.html) 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](https://russoedu.github.io/font-color-contrast-demo/#/). ## Tests and coverage Tests made using [Jest](https://jestjs.io/). [![Coverage Status](https://coveralls.io/repos/github/russoedu/font-color-contrast/badge.svg?branch=ts)](https://coveralls.io/github/russoedu/font-color-contrast?branch=ts) ## 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](https://github.com/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](https://www.w3.org/wiki/CSS/Properties/color/keywords) can now be passed as a param. ### 11.1.0 Checking if the color numbers are integer. --- _Source: https://npm.io/package/font-color-contrast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._