Skip to content
WCAG contrast ratio measurement and scoring
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
test feat: use microbundle, switch from tap to tape, improve structure Aug 20, 2018
.gitignore
CHANGELOG.md
LICENSE
README.md
index.js feat: use microbundle, switch from tap to tape, improve structure Aug 20, 2018
package.json chore(package): update microbundle to version 0.11.0 (#52) Mar 5, 2019

README.md

wcag color contrast

CircleCI

This module produces WCAG contrast ratio measurement and scoring. It's an accessibility standard, intended to make sure websites have high enough contrast to be readable by everyone, including people with low vision and age-related vision problems. This module is a low-level utility, useful for its implementation of the underlying math: to test a page, you'll want to use something like Google Chrome’s Lighthouse tools, or the axe extension for Chrome and Firefox.

I (personally, speaking as Tom) have doubts about the universality, accuracy, and application of this particular standard. High contrast is a good value, but I argue that the standard is over-strict and doesn't precisely match human perception.

API

luminance

Get the contrast ratio between two relative luminance values

Parameters

Examples

luminance(1, 1); // = 1

Returns number contrast ratio

rgb

Get a score for the contrast between two colors as rgb triplets

Parameters

Examples

rgb([0, 0, 0], [255, 255, 255]); // = 21

Returns number contrast ratio

hex

Get a score for the contrast between two colors as hex strings

Parameters

Examples

hex('#000', '#fff'); // = 21

Returns number contrast ratio

score

Get a textual score from a numeric contrast value

Parameters

Examples

score(10); // = 'AAA'

Returns string score

You can’t perform that action at this time.