A set of tools for validating the color contrast based on WCAG 2.0 standard.

Installation

Using npm

npm i cococh@latest

Using yarn

yarn add cococh@latest

or installing it manually on package.json

{
    //...otherConfigs,
    "dependencies": {
        "cococh": "^1.2.0"
    }   
}

and then do npm install or yarn install

Usage

It is possible to use different color formats and combine them:

// With rgb()
const ratios = getContrastRatios("rgb(255, 0, 0)", "rgb(0, 0, 0)");

// with rgb() and 3-digit hexa
const ratios = getContrastRatios("rgb(255, 0, 0)", "#000");

// with hsl() and rgb()
const ratios = getContrastRatios("hsl(0, 100%, 50%)", "rgb(0, 0, 0)");

// with 3-digit hexa and 6-digit hexa
const ratios = getContrastRatios("#f00", "#000000");

Any combination is valid, and you will receive an object like this:

{
    "normal": {
        "AA": true,
        "AAA": false
    },
    "large": {
        "AA": true,
        "AAA": true
    }
}

You can validate like this:

if (ratios.large.AAA) {
    // Is valid to use as large text on an AAA level
}

if (ratios.large.AA) {
    // Is valid to use as large text on an AA level
}

if (ratios.normal.AAA) {
    // Is valid to use as normal text on an AAA level
}

if (ratios.normal.AA) {
    // Is valid to use as normal text on an AA level
}

Test

To test it use:

yarn test

or

npm test