# color-contrast-checker

> This is an accessibility validator based on WCAG 2.0 standard for checking the color contrast.

Latest version **2.1.0** (published 2021-09-10) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install color-contrast-checker
pnpm add color-contrast-checker
yarn add color-contrast-checker
bun add color-contrast-checker
```

## 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 | 2.1.0 |
| Published | 2021-09-10 |
| First published | 2015-08-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Qambar Raza |
| Maintainers | qambar |
| Keywords | wcag, wcag-aa, color, contrast, verifier, accessibility, standard |

## Links

- npm: https://www.npmjs.com/package/color-contrast-checker
- Repository: https://github.com/Qambar/color-contrast-checker
- Homepage: https://github.com/Qambar/color-contrast-checker#readme
- Issues: https://github.com/Qambar/color-contrast-checker/issues
- npm.io page: https://npm.io/package/color-contrast-checker

## 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

- 2.1.0 (latest) — 2021-09-10
- 2.0.0 — 2021-09-10
- 1.5.0 — 2019-01-28
- 1.4.0 — 2017-08-21
- 1.3.0 — 2017-07-20
- 1.2.0 — 2015-08-18
- 1.0.0 — 2015-08-17
- 0.1.0 — 2015-08-11

## README

# Color Contast Checker

An accessibility checker tool for validating the color contrast based on WCAG 2.0 and WCAG 2.1 standard.

The formula (L1/L2) for contrast is based on [ISO-9241-3] and [ANSI-HFES-100-1988] standards as described here :

http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
http://www.w3.org/TR/WCAG20/#contrast-ratiodef
https://www.w3.org/TR/WCAG21/#contrast-minimum

It also supports shorthand color codes e.g #FFF or #000 etc.

https://www.w3.org/TR/2001/WD-css3-color-20010305#colorunits

Installation:
------------

```
npm install color-contrast-checker
```
or using package.json

```
{
  "name": "my-app",
  ..
  "devDependencies": {
    ..
    "color-contrast-checker": "2.1.0"
  }
}
```
Then do `npm install`

Usage:
-----

To check specific WCAG levels
```
var ccc = new ColorContrastChecker();

var color1 = "#FFFFFF";
var color2 = "#000000;

if (ccc.isLevelAA(color1, color2, 14)) {
    alert("Valid Level AA");
} else {
    alert("Invalid Contrast");
}

```

To check custom ratios
```
var ccc = new ColorContrastChecker();

var color1 = "#FFFFFF";
var color2 = "#000000;
var customRatio = 5.7;

// No need for font size, now that we are using a custom ratio.
// This is because we are no longer checking against WCAG requirements.
if (ccc.isLevelCustom(color1, color2, customRatio)) {
    alert("Above given ratio");
} else {
    alert("Invalid Contrast");
}

```

Advanced Usage:
--------------

You can pass pairs and get results:


```
    var pairs = [
        {
            'colorA': '#000000',
            'colorB': '#000000',  // All should fail
            'fontSize': 14
        },
        {
            'colorA': '#000000',
            'colorB': '#FFFFFF',  //All should pass
            'fontSize': 14
        },
        {
            'colorA': '#000000',
            'colorB': '#848484',  //AAA should fail
            'fontSize': 14
        },
        {
            'colorA': '#000000',
            'colorB': '#848484',  //All should pass (because of font)
            'fontSize': 19
        },
        {
            'colorA': '#000000',
            'colorB': '#757575',  //AA should pass AAA should fail
            'fontSize': 14
        },
        {
            'colorA': '#000000',
            'colorB': '#656565',  //All should fail
            'fontSize': 14
        }
    ];

    var results = ccc.checkPairs(pairs);

```

The result will look like this:

```
[
    {
        'WCAG_AA' : false,
        'WCAG_AAA': false
    },
    {
        'WCAG_AA' : true,
        'WCAG_AAA': true
    },
    {
        'WCAG_AA' : true,
        'WCAG_AAA': false
    },
    {
        'WCAG_AA' : true,
        'WCAG_AAA': true
    },
    {
        'WCAG_AA' : true,
        'WCAG_AAA': false
    },
    {
        'WCAG_AA' : false,
        'WCAG_AAA': false
    }
]
```

## Tests

  `npm test`

## Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

---
_Source: https://npm.io/package/color-contrast-checker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._