Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/btholt/postcss-colorblind
A PostCSS plugin for seeing your site as a colorblind person may.
https://github.com/btholt/postcss-colorblind
Last synced: 3 months ago
JSON representation
A PostCSS plugin for seeing your site as a colorblind person may.
- Host: GitHub
- URL: https://github.com/btholt/postcss-colorblind
- Owner: btholt
- License: mit
- Created: 2015-04-28T05:49:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-24T17:28:57.000Z (over 7 years ago)
- Last Synced: 2024-07-12T07:14:08.554Z (4 months ago)
- Language: JavaScript
- Size: 258 KB
- Stars: 342
- Watchers: 11
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# PostCSS Colorblind Plugin
## Why?
The biggest reason is that as many developers don't have problems seeing color,
they never stop to consider that their (or their colleagues') choices of
colors make their website unusable and frustrating to those who can't see some
shades of color. It's not even a small problem either; lots of people struggle
with red and green.
However, there are JavaScript bookmarklets that let you do this on the fly
without having to run a build step. I built this with the thought in mind you
could create an automated step to create a report of how you're doing
with color.
And lastly, building plugins for PostCSS is so damn easy and fun.
This plugin currently works for any place a CSS color is declared, whether it's
a named color (like `red` or `papayawhip`), hex, rgb, rgba, hsl or hsla. It
supports gradients and will also convert any linked images into color adjusted
embedded data.
## Install
```
npm install postcss-colorblind
```
## Setup
To make this module as effective as possible, make this the last module that
modifies your CSS.
```javascript
var fs = require("fs")
var postcss = require("postcss")
var colorblindPlugin = require("postcss-colorblind");
var css = fs.readFileSync("input.css", "utf8");
postcss()
.use(colorblindPlugin({method:'achromatopsia'}))
.process(css)
.then(function(result) {
fs.writeFileSync('output.css', result.css);
});
```
## Parameters
### method _(default: deuteranopia)_
The module expects an object with a method name that it can give to the
[color-blind](https://github.com/skratchdot/color-blind) module. Thus, as of
writing, any of the following will work:
- `protanomaly`
- `protanopia`
- `deuteranomaly`
- `deuteranopia`
- `tritanomaly`
- `tritanopia`
- `achromatomaly`
- `achromatopsia`
## Color Blindness Table
Borrowed from @skratchdot's [color-blind](https://github.com/skratchdot/color-blind), the dependency of this module.
| Group | | | |
|----------------------------------------------------|------------------------------------|-----------------------------|--------------------------|
| **Trichromat**
*3 good cones* |Normal | | |
| **Anomalous Trichromat**
*2 good cones, 1 bad* |Protanomaly
*low red* |Deuteranomaly
*low green*|Tritanomaly
*low blue*|
| **Dichromat**
*2 good cones, 1 blind* |Protanopia
*no red* |Deuteranopia
*no green* |Tritanopia
*no blue* |
| **Monochromat**
*1 good cone, 2 blind/bad* |Achromatomaly
*almost no color*|Achromatopsia
*no color* | |
## Examples
All colors, no filter:
Deuteranopia, no green:
Achromatopsia, no color:
## License
MIT
## Author
:heart: [Brian Holt](http://twitter.com/holtbt), [Ben Briggs](https://twitter.com/ben_eb)