{"id":21084153,"url":"https://github.com/unplugstudio/wcag-contrast","last_synced_at":"2025-03-14T05:11:26.438Z","repository":{"id":57169033,"uuid":"202628741","full_name":"unplugstudio/wcag-contrast","owner":"unplugstudio","description":"Utilities to work with WCAG color contrast","archived":false,"fork":false,"pushed_at":"2020-07-13T22:28:10.000Z","size":13,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-20T08:18:30.841Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unplugstudio.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-16T00:15:15.000Z","updated_at":"2019-08-16T18:35:16.000Z","dependencies_parsed_at":"2022-09-13T08:51:40.485Z","dependency_job_id":null,"html_url":"https://github.com/unplugstudio/wcag-contrast","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":"sindresorhus/node-module-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugstudio%2Fwcag-contrast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugstudio%2Fwcag-contrast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugstudio%2Fwcag-contrast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugstudio%2Fwcag-contrast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unplugstudio","download_url":"https://codeload.github.com/unplugstudio/wcag-contrast/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243526953,"owners_count":20305115,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T20:22:43.110Z","updated_at":"2025-03-14T05:11:26.417Z","avatar_url":"https://github.com/unplugstudio.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WCAG Contrast [![Build Status](https://travis-ci.com/unplugstudio/wcag-contrast.svg?branch=master)](https://travis-ci.com/unplugstudio/wcag-contrast)\n\n\u003e Utilities to work with WCAG color contrast\n\n## Install\n\n```\n$ npm install wcag-contrast\n```\n\n## Sass\n\n\u003ca id=\"general-function-luminance\"\u003e\u003c/a\u003e\n\n### @function luminance\n\nDetermine the luminance of a color (between 0 and 1) according to the WCAG algorithm\n\n+ **Group:** General\n+ **Access:** public\n\n#### Parameters\n\n| Name     | Type                                                           | Description | Default |\n| :------- | :------------------------------------------------------------- | :---------- | :------ |\n| `$color` | **[Color](https://sass-lang.com/documentation/values/colors)** | Color       | -       |\n\n#### Returns\n\n**[Number](https://sass-lang.com/documentation/values/numbers)** Luminance: 1 is pure white, 0 is pure black\n\n#### Dependents\n\n+ **@function contrast** Calculate the contrast ratio between two colors\n+ **@function contrast** Calculate the contrast ratio between two colors\n\n#### Links\n\n+ \u003chttps://css-tricks.com/snippets/sass/luminance-color-function/\u003e\n+ \u003chttp://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\u003e\n\n\u003ca id=\"general-function-contrast\"\u003e\u003c/a\u003e\n\n### @function contrast\n\nCalculate the contrast ratio between two colors\n\n+ **Group:** General\n+ **Access:** public\n\n#### Parameters\n\n| Name     | Type                                                           | Description             | Default |\n| :------- | :------------------------------------------------------------- | :---------------------- | :------ |\n| `$back`  | **[Color](https://sass-lang.com/documentation/values/colors)** | Background color        | -       |\n| `$front` | **[Color](https://sass-lang.com/documentation/values/colors)** | Foreground (text) color | -       |\n\n#### Returns\n\n**[Number](https://sass-lang.com/documentation/values/numbers)** The relative contrast of both colors\n\n#### Dependencies\n\n+ **[@function luminance](#general-function-luminance)**\n+ **[@function luminance](#general-function-luminance)**\n\n#### Dependents\n\n+ **@function choose-contrast-color** Determine whether to use dark or light text on top of given color\n+ **@function choose-contrast-color** Determine whether to use dark or light text on top of given color\n\n#### Links\n\n+ \u003chttps://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\u003e\n\n\u003ca id=\"general-function-choose-contrast-color\"\u003e\u003c/a\u003e\n\n### @function choose-contrast-color\n\nDetermine whether to use dark or light text on top of given color\n\n+ **Group:** General\n+ **Access:** public\n\n#### Parameters\n\n| Name            | Type                                                               | Description                                                 | Default |\n| :-------------- | :----------------------------------------------------------------- | :---------------------------------------------------------- | :------ |\n| `$color`        | **[Color](https://sass-lang.com/documentation/values/colors)**     | Background color                                            | -       |\n| `$contrast`     | **[Number](https://sass-lang.com/documentation/values/numbers)**   | How much contrast is considered enough                      | `4.5`   |\n| `$prefer-white` | **[Boolean](https://sass-lang.com/documentation/values/booleans)** | Prefer white when both black and white have enough contrast | `true`  |\n\n#### Returns\n\n**[Color](https://sass-lang.com/documentation/values/colors)** #fff or #000\n\n#### Dependencies\n\n+ **[@function contrast](#general-function-contrast)**\n+ **[@function contrast](#general-function-contrast)**\n\n#### Links\n\n+ \u003chttps://www.w3.org/WAI/WCAG21/Techniques/general/G18.html\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugstudio%2Fwcag-contrast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funplugstudio%2Fwcag-contrast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugstudio%2Fwcag-contrast/lists"}