{"id":13394021,"url":"https://github.com/jxnblk/contrast-swatch","last_synced_at":"2025-03-13T19:31:56.795Z","repository":{"id":67375954,"uuid":"193306644","full_name":"jxnblk/contrast-swatch","owner":"jxnblk","description":" 🅰️ Image microservice for color contrast information","archived":true,"fork":false,"pushed_at":"2019-09-09T20:49:01.000Z","size":309,"stargazers_count":209,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-02T01:13:19.637Z","etag":null,"topics":["accessibility","badge","color","color-contrast","contrast","documentation","image","svg"],"latest_commit_sha":null,"homepage":"https://contrast.now.sh/cff/40f","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/jxnblk.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}},"created_at":"2019-06-23T04:35:58.000Z","updated_at":"2023-09-07T07:07:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"b25443d1-e121-479a-a491-8684ed6ccf71","html_url":"https://github.com/jxnblk/contrast-swatch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fcontrast-swatch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fcontrast-swatch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fcontrast-swatch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Fcontrast-swatch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jxnblk","download_url":"https://codeload.github.com/jxnblk/contrast-swatch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469233,"owners_count":20295715,"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":["accessibility","badge","color","color-contrast","contrast","documentation","image","svg"],"created_at":"2024-07-30T17:01:06.071Z","updated_at":"2025-03-13T19:31:55.856Z","avatar_url":"https://github.com/jxnblk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n[![][hero]][hero]\n\n[hero]: https://contrast.now.sh/cff/40f?size=256\n\n# Contrast Swatch\n\nImage microservice for color contrast information\n\n[![][a]][a]\n[![][b]][b]\n[![][c]][c]\n\n[a]: https://contrast.now.sh/bcf/409\n[b]: https://contrast.now.sh/98f/206\n[c]: https://contrast.now.sh/fff/40f\n\n## Usage\n\nContrast swatch images can be used in any place an image is rendered.\nThe URL accepts a foreground and background color.\n\n[`https://contrast.now.sh/cff/40f`][example]\n\n[example]: https://contrast.now.sh/cff/40f\n\n**HTML**\n\n```html\n\u003cimg src=\"https://contrast.now.sh/cff/07c\" alt=\"color contrast indicator\" /\u003e\n```\n\n**Markdown**\n\n```md\n![color contrast indicator](https://contrast.now.sh/cff/07c)\n```\n\n## React\n\nYou can wrap the image in a React component (or any templating engine) for generating documentation.\n\n```js\nimport React from 'react'\n\nexport default ({\n  foreground,\n  background,\n  ...props\n}) =\u003e\n  \u003cimg\n    {...props}\n    src={`https://contrast.now.sh/${foreground}/${background}`}\n    alt='color contrast indicator'\n  /\u003e\n```\n\n## RGB\n\nCompare two `rgb` values, or an `rgb` and a hex value:\n\n```\nhttps://contrast.now.sh/rgb(204,255,255)/40f\n```\n\n[![][rgb]][rgb]\n\n[rgb]: https://contrast.now.sh/rgb(204,255,255)/40f\n\n## Customization\n\nUse URL queries to customize the styles.\n\n```\nhttps://contrast.now.sh/cff/40f?width=256\u0026height=96\u0026fontSize=1.25\n```\n\n**Pass/Fail Label**\n\n[![][pass]][pass]\n[![][fail]][fail]\n\n[pass]: https://contrast.now.sh/cff/40f?width=256\u0026height=128\u0026label=1\n[fail]: https://contrast.now.sh/a6f/40f?width=256\u0026height=128\u0026label=1\n\n**Font Size**\n\n[![][smallfont]][smallfont]\n[![][largefont]][largefont]\n\n[smallfont]: https://contrast.now.sh/cff/40f?width=256\u0026height=128\u0026fontSize=0.5\n[largefont]: https://contrast.now.sh/cff/40f?width=256\u0026height=128\u0026fontSize=2\n\n**Size**\n\n[![][large]][large]\n[![][small]][small]\n\n[large]: https://contrast.now.sh/cff/40f?size=320\n[small]: https://contrast.now.sh/cff/40f?size=48\n\n**Width \u0026 Height**\n\n[![][wide]][wide]\n[![][tall]][tall]\n\n[wide]: https://contrast.now.sh/cff/40f?width=256\u0026height=48\n[tall]: https://contrast.now.sh/cff/40f?width=32\u0026height=48\n\n**Custom Text**\n\n[![][text]][text]\n\n[text]: https://contrast.now.sh/cff/40f?width=256\u0026text=Aa\n\n**Font Weight**\n\n[![][weight]][weight]\n\n[weight]: https://contrast.now.sh/cff/40f?fontWeight=900\u0026width=256\n\n**Radius**\n\n[![][rounded]][rounded]\n[![][circle]][circle]\n\n[rounded]: https://contrast.now.sh/cff/40f?radius=8\n[circle]: https://contrast.now.sh/cff/40f?radius=48\n\n## Options\n\n\nOption | Description\n---|---\n`size`      | Width \u0026 height in pixels\n`width`     | Width of image in pixels\n`height`    | Height of image in pixels (font size will scale based on height)\n`fontSize`  | Relative font size (default 1)\n`fontWeight`| Font weight (default 1)\n`label`     | Show a pass/fail label based on the [WCAG Criteria][wcag]\n`radius`    | Border radius\n`baseline`   | Shift text baseline down\n`text`      | Render any custom text\n\n## Metadata\n\nA JSON response with color contrast information can be fetched by adding the `type=json` query to the URL.\n\n```\nhttps://contrast.now.sh/cff/40f?type=json\n```\n\n**Note:** the returned JSON schema might change in a future version\n\n[wcag]: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html\n\n## Related\n\n- [Colorable](https://colorable.jxnblk.com)\n- [Use Contrast](https://usecontrast.com/)\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Fcontrast-swatch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjxnblk%2Fcontrast-swatch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Fcontrast-swatch/lists"}