Show HN: Experience Colorblindness on the Web | Hacker News Reader

Show HN: Experience Colorblindness on the Web

github.com

92 pointsoftheheadland18 comments

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-...

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/ - 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.

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

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

protanopia simulation: 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)

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

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. :)

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

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/

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!

Years ago I was in contact with a person with total color blindness (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.

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

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

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/ 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.

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

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

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.

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.

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

This is great! Thank you for writing it.

Reply on news.ycombinator.com