PostCSS Colorblind Plugin
The biggest reason is that as many developers don't have problems seeing color, they never stop to consider that their (or their constituents') 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.
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
papayawhip), hex, rgb, rgba, hsl or hsla. It
supports gradients and will also convert any linked images into color adjusted
npm install postcss-colorblind
To make this module as effective as possible, make this the last module that modifies your CSS.
var fs =var postcss =var colorblindPlugin = ;var css = fs;;
method (default: deuteranopia)
The module expects an object with a method name that it can give to the color-blind module. Thus, as of writing, any of the following will work:
Color Blindness Table
Borrowed from @skratchdot's color-blind, the dependency of this module.
3 good cones
2 good cones, 1 bad
2 good cones, 1 blind
1 good cone, 2 blind/bad
almost no color
All colors, no filter:
Deuteranopia, no green:
Achromatopsia, no color:
❤️ Brian Holt