npmpackage.info

Gathering detailed insights and metrics for color-contrast-checker

Other packages similar to color-contrast-checker

a11y-color-contrast-checker

1.0.24

A lightweight utility for checking color contrast ratios between foreground and background colors in the DOM, ensuring accessibility compliance with WCAG guidelines. Perfect for web developers and designers aiming to create inclusive digital experiences

wcag-color-contrast-checker

1.0.1

A simple color contrast checker based on the WCAG recommendations.

is-contrast-checker

1.0.5

Color palette combination contrast tester

the-simplest-color-checker

4.1.3

A powerful, dependency-free color manipulation library

Gathering detailed insights and metrics for color-contrast-checker

color-contrast-checker - 2.1.0 | npmpackage.info

color-contrast-checker

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

2.1.0

Apache-2.0

JavaScript

1.04 kB

1,280,966 2.7

Installations

npm install color-contrast-checker

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.15.4

NPM Version

7.20.6 Score

90.9

Supply Chain

100

Quality

75.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

1

Total

1

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

HTML

JavaScript (90.52%)

HTML (9.48%)

Developer

Qambar

Download Statistics

Total Downloads

1,280,966

Last Day

1,604

Last Week

10,624

Last Month

48,331

Last Year

461,595

GitHub Statistics

Apache-2.0 License

1 Stars

42 Commits

1 Forks

1 Branches

1 Contributors

Updated on Apr 15, 2025

Bundle Size

2.71 kB

Minified

1.04 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

2.1.0

Package Id

color-contrast-checker@2.1.0

Unpacked Size

36.04 kB

Size

8.96 kB

File Count

NPM Version

7.20.6

Node Version

14.15.4

Total Downloads

Cumulative downloads

Total Downloads

1,280,966

Last Day

21.8%

1,604

Compared to previous day

Last Week

-4.1%

10,624

Compared to previous week

Last Month

5.9%

48,331

Compared to previous month

Last Year

10%

461,595

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

chai eslint mocha

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.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More