Skip to content

Calculate contrast ratio between to CSS color strings.

Notifications You must be signed in to change notification settings

misund/get-contrast-ratio

Repository files navigation

Get contrast ratio

get-contrast-ratio calculates the contrast ratio between two CSS color's relative luminances based on this definition from W3C.

It doesn't handle transparency as of yet.

This is the contrast ratio you'll need to care about to pass WCAG requirements.

Installation

$ npm install get-contrast-ratio

Usage

import getContrastRatio from 'get-contrast-ratio';

getContrastRatio('black', 'white'); // 21
getContrastRatio('rgb(0,0,0)', 'rgb(255,255,255)'); // 21
getContrastRatio('black', '#000'); // 1
getContrastRatio('white', '#fff'); // 1
getContrastRatio('hsl(50, 30%, 40%)', 'hsl(50, 30%, 40%)'): // 1

Signature

(color1: string, color2: string } = {}) => number

The string parameters are more specifically strings that can be parsed as colors in CSS.

The return value is a number with two decimals in the range 1 <= number <= 21.

Contributing

I appreciate your issues and PRs on Github!

Testing

yarn build && yarn test

Releasing

This project uses np.

  1. Make sure your changes are in master
  2. Run yarn release
  3. Follow the interactive release guide

About

Calculate contrast ratio between to CSS color strings.

Resources

Stars

Watchers

Forks

Packages

No packages published