Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tmcw/wcag-contrast
WCAG contrast ratio measurement and scoring
https://github.com/tmcw/wcag-contrast
Last synced: 18 days ago
JSON representation
WCAG contrast ratio measurement and scoring
- Host: GitHub
- URL: https://github.com/tmcw/wcag-contrast
- Owner: tmcw
- License: bsd-2-clause
- Created: 2013-09-05T15:15:45.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2020-08-18T03:01:59.000Z (about 4 years ago)
- Last Synced: 2024-10-12T04:16:48.675Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 135 KB
- Stars: 124
- Watchers: 4
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## 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
### 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