wcag-contrast
Version:
evaluate the wcag color contrast score for two colors
80 lines (46 loc) • 3.18 kB
Markdown
## wcag color contrast
[](https://circleci.com/gh/tmcw/wcag-contrast)
This module produces [WCAG](http://www.w3.org/WAI/intro/wcag.php) [contrast ratio](http://www.w3.org/TR/WCAG20/#contrast-ratiodef)
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](https://www.aao.org/eye-health/diseases/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](https://developers.google.com/web/tools/lighthouse/), or the [axe extension](https://www.deque.com/axe/) for Chrome and Firefox.
I (personally, speaking as Tom) have doubts about the [universality, accuracy, and application of this particular standard](https://macwright.org/2019/03/30/color-contrast-is-a-problem.html). High contrast is a good value, but I argue that the standard is over-strict and doesn't precisely match human perception.
## API
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
### luminance
Get the contrast ratio between two relative luminance values
**Parameters**
- `a` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** luminance value
- `b` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** luminance value
**Examples**
```javascript
luminance(1, 1); // = 1
```
Returns **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** contrast ratio
### rgb
Get a score for the contrast between two colors as rgb triplets
**Parameters**
- `a` **[array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)**
- `b` **[array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)**
**Examples**
```javascript
rgb([0, 0, 0], [255, 255, 255]); // = 21
```
Returns **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** contrast ratio
### hex
Get a score for the contrast between two colors as hex strings
**Parameters**
- `a` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** hex value
- `b` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** hex value
**Examples**
```javascript
hex('#000', '#fff'); // = 21
```
Returns **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)** contrast ratio
### score
Get a textual score from a numeric contrast value
**Parameters**
- `contrast` **[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)**
**Examples**
```javascript
score(10); // = 'AAA'
```
Returns **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** score