{"id":30850948,"url":"https://github.com/progressplanner/wcagcolors.js","last_synced_at":"2025-09-07T06:40:38.589Z","repository":{"id":147342232,"uuid":"166496505","full_name":"ProgressPlanner/wcagColors.js","owner":"ProgressPlanner","description":"A simple script that helps you get colors compliant with the WCAG guidelines.","archived":false,"fork":false,"pushed_at":"2019-07-21T23:23:01.000Z","size":120,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-05T23:49:25.190Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://aristath.github.io/wcagColors.js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ProgressPlanner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-19T02:13:44.000Z","updated_at":"2025-09-05T09:41:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"b31b48fd-a012-42f8-972e-4d8822c19a98","html_url":"https://github.com/ProgressPlanner/wcagColors.js","commit_stats":null,"previous_names":["progressplanner/wcagcolors.js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ProgressPlanner/wcagColors.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgressPlanner%2FwcagColors.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgressPlanner%2FwcagColors.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgressPlanner%2FwcagColors.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgressPlanner%2FwcagColors.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProgressPlanner","download_url":"https://codeload.github.com/ProgressPlanner/wcagColors.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProgressPlanner%2FwcagColors.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274005337,"owners_count":25205934,"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","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-09-07T06:40:33.819Z","updated_at":"2025-09-07T06:40:38.565Z","avatar_url":"https://github.com/ProgressPlanner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wcagColors.js\n\n`wcagColors` is a simple script that allows you to add some criteria and get an array of colors that match those criteria. It was built as a way to get color combinations that comply with WCAG rules, but can be used for other purposes since you provide your own rules and it doesn't have hardcoded values.\n\nIt was conceived while building custom WCAG-related controls for the WordPress Customizer for [wplemon.com](https://wplemon.com).\n\nIt is vanilla JS with no dependencies whatsoever and its size gzipped is less than 4Kb so you can use it without adding any bloat to your projects.\n\n## Structure\n\n`wcagColors` is a JS object with a few functions that are chainable.\nThe functions documented below return a copy of the `wcagColors` object with the `wcagColors.colors` property modified according to the arguments you provide.\n\n## Example\n\nIn this example we assume that we have a white background color, black text, and we want to get a color that we'll use for our links. In order for our color to be WCAG 2.0 compliant it should have a minimum contrast of 7:1 with our white background and a minimum contrast of 3:1 with surrounding text.\n\n```js\nvar colors = wcagColors.getAll({ // Populate the initial pool of colors.\n    color: '#0000ff',\n    minHueDiff: 0,\n    maxHueDiff: 10,\n    stepHue: 5,\n    minSaturation: 0.4,\n    maxSaturation: 1,\n    stepSaturation: 0.05,\n    minLightness: 0,\n    maxLightness: 1.001,\n    stepLightness: 0.05,\n}).pluck({ // We want our color to have a minimum contrast of 7:1 with a white background.\n    color: '#ffffff',\n    minContrast: 7\n}).pluck({ // We want our color to have a minimum contrast of 3:1 with surrounding black text.\n    color: '#000000',\n    minContrast: 3\n})\n.sortBy( 's' ) // Sort colors by saturation.\n.getHexArray(); // get the array of colors.\n```\n\nThe above code will return an array of colors that fulfil the following criteria:\n* Has a minimum contrast of 3:1 with `#000`.\n* Has a minimum contrast of 7:1 with `#fff`.\n* Has a maximum difference in hue with `#0000ff` of 10 degrees.\n* Has a minimum saturation of `0.4`.\n* Has a maximum saturation of `1`.\n\nHow detailed the search for colors is is determined by the `stepHue`, `stepSaturation` and `stepLightness` arguments.\n\nThe result is an array containing 11 colors, sorted by their saturation levels:\n```js\n[\n    \"#4f30e8\",\n    \"#5336e2\",\n    \"#493cdd\",\n    \"#573cdd\",\n    \"#4242d7\",\n    \"#4e42d7\",\n    \"#4747d1\",\n    \"#5046b9\",\n    \"#5946b9\",\n    \"#4c4cb3\",\n    \"#554cb3\",\n];\n```\n\n## Functions:\n\n### `getAll()`\n\nThe `wcagColors.getAll()` function gets a copy of the object with the `wcagColors.colors` array populated according to the function parameters. It is the first function that should always run.\nA `color` or `hue` argument must be provided as a basis.\n\n```js\nvar colors = wcagColors.getAll({\n    color: '#333', // A color formatted as RGB, HSL or HEX.\n    // hue: 100, // If a color is not provided, we can alternatively provide a hue.\n    minSaturation: 0, // The minimum saturation the returned colors can have (0-1).\n    maxSaturation: 1, // The maximum saturation the returned colors can have (0-1).\n    stepSaturation: 0.1, // The increments in saturation while populating for colors (0-1).\n    stepLightness: 0.1, // Each lightness step. Smaller numbers are more detailed but slower.\n    minHueDiff: 0, // The minimum hue difference (0-359).\n    maxHueDiff: 359, // The maximum hue difference (0-359).\n    stepHue: 15 // How many degrees to turn the colorwheel on each iteration.\n});\n```\n\n### `pluck()`\n\nThe `wcagColors.pluck()` function returns a copy of the `wcagColors` object with the `wcagColors.colors` array modified according to the criteria provided. It can be chaned after the `wcagColors.getAll()` function to pluck the populated colors that meet our demands.\n\n```js\nvar colorsReadableOnWhite = colors.pluck({\n    color: '#ffffff',\n    minContrast: 7 // The minimum contrast required (0-21).\n    // minHueDiff: 0 // In some cases (like when looking for links colors) we may require a minimum hue difference (0-359).\n    // maxHueDiff: 359 // Maximum hue difference.\n});\n```\n\n### `sortBy()`\n\nThe `wcagColors.sortBy()` function allows us to sort the `wcagColors.colors` array depending on what we want.\n\nIt accept a single string argument which represets how we want to sort the colors. The acceptable values for this argument are the following:\n* `r`, `g` or `b` if we want to sort colors based on the values of red, green \u0026 blue.\n* `h`, `s` or `l` if we want to sort colors based on their hue, saturation or lightness.\n* `lum` if we want to sort colors based on their luminance.\n* `contrast` if we want to sort colors based on their contrast with the color provided in the `pluck` function chaned before. Please note that this is only available if the `pluck` function used a `minContrast` parameter.\n\n```js\nvar colorsReadableOnWhiteSorted = colorsReadableOnWhite.sortBy( 'contrast' );\n```\n\n### `getHexArray()`\n\nReturns an array of HEX colors.\n\n```js\nvar colorsArray = colorsReadableOnWhiteSorted.getHexArray();\n```\n\nThe object contains numerous helper functions, for more details on those you can take a look at the code on the [github repository](https://github.com/aristath/wcagColors.js/blob/master/wcagColors.js). All functions have adequate inline docs you can refer to.\n\n## License:\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogressplanner%2Fwcagcolors.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogressplanner%2Fwcagcolors.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogressplanner%2Fwcagcolors.js/lists"}