Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tmcw/wcag-contrast

WCAG contrast ratio measurement and scoring
https://github.com/tmcw/wcag-contrast

Last synced: 16 days ago
JSON representation

WCAG contrast ratio measurement and scoring

Awesome Lists containing this project

README

        

## wcag color contrast

[![CircleCI](https://circleci.com/gh/tmcw/wcag-contrast.svg?style=svg)](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