
Show HN: Experience Colorblindness on the Web - oftheheadland
https://github.com/oftheheadland/Colorblindly
======
brianmcc
Cool - I'm quite severely colour blind, I'll give it a go when I get home and
see if it passes my own "looks identical to me so it's probably a good
simulation" test!

Some reading on colour blindness for anyone unaffected who might be interested
-> [https://mcconnellsoftware.github.io/colourblind-in-
software-...](https://mcconnellsoftware.github.io/colourblind-in-software-
driven-world/)

~~~
tom_
Inspired by one of the links there: dear anybody listening, if you're going to
show a bunch of comparison photos/screen grabs, or before/after screen shots,
and the like - e.g.,
[http://www.colourblindawareness.org/](http://www.colourblindawareness.org/)
\- don't put a scroll effect in. Don't put a fade down then fade up effect in.
It makes it too hard to see the difference. Just flick instantly between one
and the next.

(Possibly related: [https://www.forbes.com/sites/quora/2012/02/15/why-does-
adobe...](https://www.forbes.com/sites/quora/2012/02/15/why-does-adobe-
photoshop-differentiate-between-undo-and-step-backwards/))

------
oftheheadland
Hi all,

At my company we try to keep our website colorblind-friendly. I decided to
spend my free time building an extension to help me do that and realized I
could share this experience with the world.

What is surprising is how different everything looks for colorblind people -
it's not just black and white like you might expect.

It works by placing a CSS filter over the page that distorts colors similarly
to actual colorblindness-distortion.

This is my first Chrome Extension - I would love to hear your feedback!

Cheers, Andrew

~~~
poopchute
This is neat but there is something quite wrong with the
protanomaly/protanopia simulation. Look how it effects blue:

normal: [https://i.imgur.com/icgmrI6.png](https://i.imgur.com/icgmrI6.png)

protanopia simulation:
[https://i.imgur.com/3FKU4eT.png](https://i.imgur.com/3FKU4eT.png)

It adds a ton of red instead of removing it. Blues should be largly unaffected
by protanomaly (though purples will turn to blue)

~~~
oftheheadland
I think you're right, I'll look into this. Thank you!

------
NeedMoreTea
Nice to see someone actually caring these days. It seems like accessibility
just got forgotten about. I'm not colour blind, but I'm glad that you
bothered. I hope it gets plenty of use by those developing sites.

Someone's bound to ask, so any plans for a Firefox version?

Mind I've reached an age where I'd rather like it to be compulsory for all
devs to use a "congrats, you're old enough to need reading glasses" simulator
on web and phone apps. :)

~~~
oftheheadland
Firefox version is next on my To Do List, hopefully in the next month! Thanks
for your thoughts!

------
newscracker
Anything that helps improve accessibility is good! I'm looking forward to the
Firefox extension.

I did a quick search for such extensions for Firefox, and there were at least
a few. I'm sure Chrome would also have some already.

1\. If you have time, some research on existing extensions and how yours is
different or better would be nice to have.

2\. Your readme says that it applies a CSS filter. So could this be easily
adapted for use with an extension like Stylus [1] (though that may not be as
convenient)?

[1]: [https://addons.mozilla.org/en-US/firefox/addon/styl-
us/](https://addons.mozilla.org/en-US/firefox/addon/styl-us/)

~~~
oftheheadland
1\. Part of the inspiration for Colorblindly came from my disappointment with
the existing alternatives. I wanted to make something that took advantage of
the most recent tools for web development, and more importantly, worked on any
page! But kudos to the other devs working on accessibility software, not
enough love in this area.

2\. Stylus sounds like something to look into, it should be pretty easy to
adapt for use with it. Thanks for the tip!

------
jansan
Years ago I was in contact with a person with total color blindness
([https://en.wikipedia.org/wiki/Achromatopsia](https://en.wikipedia.org/wiki/Achromatopsia))
and together we developed a filter to simulate this. It never went online, but
if I find that project on my backups, would you be interested in the
parameters of the filter? I could just post it as an issue.

The idea at that time was to help web developers avoid color combinations that
are really hard to read for people with achromatopsia. But we soon found out
that the worst color combinations were basically a total eye sore for people
with normal color vision, so the benefit was limited.

------
darekkay
Looks good! One should also mention Funkify [0], which supports other
accessibility simulations (Chrome only).

[0] [https://www.funkify.org/](https://www.funkify.org/)

------
geori
I'm very color blind and I don't think this extension correctly handles red-
green color blindness. If you take a look at
[http://www.colourblindawareness.org/colour-
blindness/](http://www.colourblindawareness.org/colour-blindness/) and see
their examples of Deuteranopia, they are exactly what I see. When the app
shows the Deuteranopia view, I think the extension modifies colors that aren't
red and green.

~~~
hellojason
Forgive my ignorance, but how do you know that what these tools show is good
or bad at representing what you see?

~~~
OscarCunningham
Presumably because the image looks to him exactly like the full-colour image.

~~~
brianmcc
Exactly: "normal" and "simulated" should be indistinguishable - and often, for
me having reg/green deficiency, that's the case. I'll often look to confirm
that images truly are different before using them as examples.

Colour deficiencies vary, though, so even a simulation that works perfectly
for some is not going to be a universal simulation.

These simulations are amazing in terms of illustrating to colour-capable
people what we colour-deficient actually see: it's not black and white, to us
the world is still bright, vivid, colourful. It's _our normal_ and that mostly
isn't a problem. But a bright red rose that's colourful and vivid to me, looks
to my wife grey and faded.

------
nialv7
You can do that with stock Android without any additional tools:

The enable developer options, go there, scroll down until you find the
"simulate color space" option.

~~~
poopchute
I'm still on Android 6.1 so maybe Google has fixed it since then but the
Protanomaly simulation is extremely wrong

------
bloopernova
This is great! Thank you for writing it.

