Dark blue => dark blue, light blue => Pink!!

[samjewell]

Hey there

Thanks for making this cool library. The colors that come out for me are pretty mental though

Using postcss-colorblind (which uses this library for hex code transformations) I start with colors as follows:

Then skratchdot/color-blind gives me a lot of pink and blue - feels like it is increasing the contrast in fact:

While photoshop thinks that deuteranopia should look more like this:

Checked it in the node repl to check the issue was coming from this npm package, which I believe it is:

Those hex codes are the light blue (converting to pink) and the dark blue (staying pretty blue)

Thanks a lot!

Originally posted this into another repo as this issue: https://github.com/btholt/postcss-colorblind/issues/10#issuecomment-145066981

[skratchdot]

@samjewell - I saw your bug report earlier and was going to look into it. I'm using the Daltonize code from mudcu.be's site. If you view the sphere experiment and enable the Deuteranopia filter, you will notice the color palette that's being generated:

http://mudcu.be/sphere/#config={%22hsl%22:{%22H%22:212,%22S%22:63,%22L%22:94},%22theme%22:%22dark%22,%22quantize%22:0,%22harmony%22:%22Neutral%22,%22vision%22:%22Deuteranopia%22,%22space%22:%22RYB%22,%22top%22:62,%22left%22:50,%22diameter%22:500,%22scale%22:1,%22dot%22:false}

Notice your light blue color is in the center of the sphere (very light and white).

I suspect the photoshop filter is just using an RGB matrix transform which does an okay job of simulating color-blindness, but apparently is not as "good" as Daltonization (http://www.daltonize.org/).

I don't know much about color blindness, just put up this code because it seemed useful to be on NPM, and I needed something like it for a site I was working on.

I originally used the "color matrix" code, but the results weren't very exact when I would match pictures up against some of the color blindness information I was reading. Color Matrix values can be seen here: http://web.archive.org/web/20081014161121/http://www.colorjack.com/labs/colormatrix/

I actually just noticed I created a color-matrix library, but never published it to NPM because it wasn't quite done (no tests written, no documentation, and 2 unimplemented methods).

I just went ahead and published it anyways. I'll fix the code this week, and try to look into this some more...

Can you provide any more information about how the Photoshop filter works? Is it built-in? Is it a matrix transformation?

[samjewell]

Oh wow, thanks for all of the information - I feel like you know MUCH more about this than I do. I actually was on Photoshop CS4, which is around 5 years old - I haven't had a chance to look into this any more, but it could be that Photoshop is less than perfect. I guess it was just the actual colours themselves in the screenshots that set alarm bells ringing for me. This isn't really a live project for me in my day-to-day work, was more just experimenting, so can I leave it with you to do with as you see fit? Happy for you to close this issue for instance.

Cheers!

[skratchdot]

I'll leave it open so it's easier for other people to find- and because it very well could be a bug- but I want to research it a bit more. At the very least, I'm going to try to add some "matrix transform" options, so you can can use the library like:

blinder.deuteranopia('blue');

or maybe

blinder.matrixDeuteranopia('blue');

which would use the following matrix values: https://github.com/skratchdot/color-matrix/blob/488b5daa654d9252e9c4945d7d7328deb02ba7a7/lib/preset-data.js#L24-L28

I also want to make cli versions available, so you can pass in an image, and get a result. I'll try to work on that this week. Thanks again...

[samjewell]

Oh yeah, passing in an image via cli would be a great feature. And you're welcome :-)