{"id":13818867,"url":"https://github.com/btholt/postcss-colorblind","last_synced_at":"2025-05-16T03:34:01.935Z","repository":{"id":31151446,"uuid":"34711352","full_name":"btholt/postcss-colorblind","owner":"btholt","description":"A PostCSS plugin for seeing your site as a colorblind person may.","archived":false,"fork":false,"pushed_at":"2017-03-24T17:28:57.000Z","size":264,"stargazers_count":341,"open_issues_count":2,"forks_count":10,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-29T18:08:37.196Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/btholt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-28T05:49:55.000Z","updated_at":"2024-11-13T15:47:56.000Z","dependencies_parsed_at":"2022-09-17T11:21:10.084Z","dependency_job_id":null,"html_url":"https://github.com/btholt/postcss-colorblind","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btholt%2Fpostcss-colorblind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btholt%2Fpostcss-colorblind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btholt%2Fpostcss-colorblind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btholt%2Fpostcss-colorblind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/btholt","download_url":"https://codeload.github.com/btholt/postcss-colorblind/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464115,"owners_count":22075564,"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-08-04T08:00:33.186Z","updated_at":"2025-05-16T03:34:01.637Z","avatar_url":"https://github.com/btholt.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Colorblind Plugin\n\n## Why?\n\nThe biggest reason is that as many developers don't have problems seeing color,\nthey never stop to consider that their (or their colleagues') choices of\ncolors make their website unusable and frustrating to those who can't see some\nshades of color. It's not even a small problem either; lots of people struggle\nwith red and green.\n\nHowever, there are JavaScript bookmarklets that let you do this on the fly\nwithout having to run a build step. I built this with the thought in mind you\ncould create an automated step to create a report of how you're doing\nwith color.\n\nAnd lastly, building plugins for PostCSS is so damn easy and fun.\n\nThis plugin currently works for any place a CSS color is declared, whether it's\na named color (like `red` or `papayawhip`), hex, rgb, rgba, hsl or hsla. It\nsupports gradients and will also convert any linked images into color adjusted\nembedded data.\n\n## Install\n\n```\nnpm install postcss-colorblind\n```\n\n## Setup\n\nTo make this module as effective as possible, make this the last module that\nmodifies your CSS.\n\n```javascript\nvar fs = require(\"fs\")\nvar postcss = require(\"postcss\")\nvar colorblindPlugin = require(\"postcss-colorblind\");\n\nvar css = fs.readFileSync(\"input.css\", \"utf8\");\n\npostcss()\n  .use(colorblindPlugin({method:'achromatopsia'}))\n  .process(css)\n  .then(function(result) {\n    fs.writeFileSync('output.css', result.css);\n  });\n```\n\n## Parameters\n\n### method _(default: deuteranopia)_\n\nThe module expects an object with a method name that it can give to the\n[color-blind](https://github.com/skratchdot/color-blind) module. Thus, as of\nwriting, any of the following will work:\n\n- `protanomaly`\n- `protanopia`\n- `deuteranomaly`\n- `deuteranopia`\n- `tritanomaly`\n- `tritanopia`\n- `achromatomaly`\n- `achromatopsia`\n\n## Color Blindness Table\n\nBorrowed from @skratchdot's [color-blind](https://github.com/skratchdot/color-blind), the dependency of this module.\n\n|                    Group                           |                                    |                             |                          |\n|----------------------------------------------------|------------------------------------|-----------------------------|--------------------------|\n| **Trichromat**\u003cbr/\u003e*3 good cones*                  |Normal                              |                             |                          |\n| **Anomalous Trichromat**\u003cbr/\u003e*2 good cones, 1 bad* |Protanomaly\u003cbr/\u003e*low red*           |Deuteranomaly\u003cbr/\u003e*low green*|Tritanomaly\u003cbr/\u003e*low blue*|\n| **Dichromat**\u003cbr/\u003e*2 good cones, 1 blind*          |Protanopia\u003cbr/\u003e*no red*             |Deuteranopia\u003cbr/\u003e*no green*  |Tritanopia \u003cbr/\u003e*no blue* |\n| **Monochromat**\u003cbr/\u003e*1 good cone, 2 blind/bad*     |Achromatomaly\u003cbr /\u003e*almost no color*|Achromatopsia\u003cbr/\u003e*no color* |                          |\n\n## Examples\n\nAll colors, no filter:\n\n![All colors](img/all.jpg)\n\nDeuteranopia, no green:\n\n![Deuteranopia](img/deuteranopia.jpg)\n\nAchromatopsia, no color:\n\n![Achromatopsia](img/achromatopsia.jpg)\n\n## License\n\nMIT\n\n## Author\n\n:heart: [Brian Holt](http://twitter.com/holtbt), [Ben Briggs](https://twitter.com/ben_eb)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtholt%2Fpostcss-colorblind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbtholt%2Fpostcss-colorblind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtholt%2Fpostcss-colorblind/lists"}