Cococh (Color contrast checker)

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

Installation

Using npm

1npm i cococh@latest

Using yarn

1yarn add cococh@latest

or installing it manually on package.json

1{
2    //...otherConfigs,
3    "dependencies": {
4        "cococh": "^1.2.0"
5    }   
6}

and then do npm install or yarn install

Usage

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

1// With rgb()
2const ratios = getContrastRatios("rgb(255, 0, 0)", "rgb(0, 0, 0)");
3
4// with rgb() and 3-digit hexa
5const ratios = getContrastRatios("rgb(255, 0, 0)", "#000");
6
7// with hsl() and rgb()
8const ratios = getContrastRatios("hsl(0, 100%, 50%)", "rgb(0, 0, 0)");
9
10// with 3-digit hexa and 6-digit hexa
11const ratios = getContrastRatios("#f00", "#000000");

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

1{
2    "normal": {
3        "AA": true,
4        "AAA": false
5    },
6    "large": {
7        "AA": true,
8        "AAA": true
9    }
10}

You can validate like this:

1if (ratios.large.AAA) {
2    // Is valid to use as large text on an AAA level
3}
4
5if (ratios.large.AA) {
6    // Is valid to use as large text on an AA level
7}
8
9if (ratios.normal.AAA) {
10    // Is valid to use as normal text on an AAA level
11}
12
13if (ratios.normal.AA) {
14    // Is valid to use as normal text on an AA level
15}

Test

To test it use:

1yarn test

or

1npm test