Utilities to work with WCAG color contrast
$ npm install wcag-contrast
Determine the luminance of a color (between 0 and 1) according to the WCAG algorithm
- Group: General
- Access: public
| Name | Type | Description | Default |
|---|---|---|---|
$color |
Color | Color | - |
Number Luminance: 1 is pure white, 0 is pure black
- @function contrast Calculate the contrast ratio between two colors
- @function contrast Calculate the contrast ratio between two colors
- https://css-tricks.com/snippets/sass/luminance-color-function/
- http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
Calculate the contrast ratio between two colors
- Group: General
- Access: public
| Name | Type | Description | Default |
|---|---|---|---|
$back |
Color | Background color | - |
$front |
Color | Foreground (text) color | - |
Number The relative contrast of both colors
- @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
Determine whether to use dark or light text on top of given color
- Group: General
- Access: public
| Name | Type | Description | Default |
|---|---|---|---|
$color |
Color | Background color | - |
$contrast |
Number | How much contrast is considered enough | 4.5 |
$prefer-white |
Boolean | Prefer white when both black and white have enough contrast | true |
Color #fff or #000