https://github.com/unplugstudio/wcag-contrast
Utilities to work with WCAG color contrast
https://github.com/unplugstudio/wcag-contrast
Last synced: over 1 year ago
JSON representation
Utilities to work with WCAG color contrast
- Host: GitHub
- URL: https://github.com/unplugstudio/wcag-contrast
- Owner: unplugstudio
- License: mit
- Created: 2019-08-16T00:15:15.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-13T22:28:10.000Z (almost 6 years ago)
- Last Synced: 2025-02-20T08:18:30.841Z (over 1 year ago)
- Language: CSS
- Size: 12.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: license
Awesome Lists containing this project
README
# WCAG Contrast [](https://travis-ci.com/unplugstudio/wcag-contrast)
> Utilities to work with WCAG color contrast
## Install
```
$ npm install wcag-contrast
```
## Sass
### @function luminance
Determine the luminance of a color (between 0 and 1) according to the WCAG algorithm
+ **Group:** General
+ **Access:** public
#### Parameters
| Name | Type | Description | Default |
| :------- | :------------------------------------------------------------- | :---------- | :------ |
| `$color` | **[Color](https://sass-lang.com/documentation/values/colors)** | Color | - |
#### Returns
**[Number](https://sass-lang.com/documentation/values/numbers)** Luminance: 1 is pure white, 0 is pure black
#### Dependents
+ **@function contrast** Calculate the contrast ratio between two colors
+ **@function contrast** Calculate the contrast ratio between two colors
#### Links
+
+
### @function contrast
Calculate the contrast ratio between two colors
+ **Group:** General
+ **Access:** public
#### Parameters
| Name | Type | Description | Default |
| :------- | :------------------------------------------------------------- | :---------------------- | :------ |
| `$back` | **[Color](https://sass-lang.com/documentation/values/colors)** | Background color | - |
| `$front` | **[Color](https://sass-lang.com/documentation/values/colors)** | Foreground (text) color | - |
#### Returns
**[Number](https://sass-lang.com/documentation/values/numbers)** The relative contrast of both colors
#### Dependencies
+ **[@function luminance](#general-function-luminance)**
+ **[@function luminance](#general-function-luminance)**
#### Dependents
+ **@function choose-contrast-color** Determine whether to use dark or light text on top of given color
+ **@function choose-contrast-color** Determine whether to use dark or light text on top of given color
#### Links
+
### @function choose-contrast-color
Determine whether to use dark or light text on top of given color
+ **Group:** General
+ **Access:** public
#### Parameters
| Name | Type | Description | Default |
| :-------------- | :----------------------------------------------------------------- | :---------------------------------------------------------- | :------ |
| `$color` | **[Color](https://sass-lang.com/documentation/values/colors)** | Background color | - |
| `$contrast` | **[Number](https://sass-lang.com/documentation/values/numbers)** | How much contrast is considered enough | `4.5` |
| `$prefer-white` | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | Prefer white when both black and white have enough contrast | `true` |
#### Returns
**[Color](https://sass-lang.com/documentation/values/colors)** #fff or #000
#### Dependencies
+ **[@function contrast](#general-function-contrast)**
+ **[@function contrast](#general-function-contrast)**
#### Links
+