# wcag-contrast

**Repository Path**: mirrors_tmcw/wcag-contrast

## Basic Information

- **Project Name**: wcag-contrast
- **Description**: WCAG contrast ratio measurement and scoring
- **Primary Language**: Unknown
- **License**: BSD-2-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-22
- **Last Updated**: 2026-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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

<!-- 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