Making the web (and beyond) a better place for the colorblind | Hacker News Reader

Making the web (and beyond) a better place for the colorblind

wearecolorblind.com

43 pointstomvb19 comments

A small free tool for OS X I found useful is Sim Daltonism[1]

Sim Daltonism is a color blindness simulator for Mac OS X. It filters in real-time the area around the mouse pointer and displays the result ” as seen by a color blind person ” in a floating palette.

If anybody has information about how people with limited color vision perceive the aesthetical side of colors (e.g. how well colors go together in a web site palette) I would love to read about it.

[1] http://michelf.com/projects/sim-daltonism/

This is very cool, thanks for posting this.

I wanted to find a similar utility for Windows and came across Color Oracle:

http://colororacle.org/

Also, thanks to this, I've noticed that the common purple color for visited links is distinguishable from the blue it usually accompanies (e.g. Google) for people with deuteranopia.

Good stuff, sent him an email with suggestions, any more?

-----------------------

Hi Tom, I'm a developer and one of my best friends is colorblind, so I'm onboard. Suggestion - your site clearly demonstrates the problem, but it would be helpful to make it the go-to place for solutions too.

How about starting a list of colorblind-friendly color schemes, for starters? Something those of us who don't need convincing but do need solutions can pull up whenever we're starting a new project and pick the scheme from?

Lots of tools for colorschemes on the web:

http://sixrevisions.com/usabilityaccessibility/14-brilliant-...

https://kuler.adobe.com/

http://colllor.com/

http://colorschemedesigner.com/

http://colorschemetools.net/

http://www.dasplankton.de/ContrastA/

Click the "Show Color Deficiency Simulation". It also helps with contrast. I am not close to anyone who is colorblind but this is a good reminder.

I am about to do a major rework of my site. It is going to be mostly black/white but I kind of want to use a small amount of a rainbow scheme. It kind of works nicely since we sell flavoring. I guess I will just try to minimize the damage and make sure I leave other cues.

Shouldn't display drivers have a "color blind" mode that would alter colors to make them perceptible? It seems an overkill to ask for the whole web to change.

Its not like assistance tools don't exist, but by squishing all the information in an image into a smaller visual space that I can distinguish, it makes everything look worse. Which is fine because I only really need to be able to distinguish difference in color that precisely about once a month so I only use a tool when I need it. Most colorblind people don't have enough need to even have a software tool.

I am always going to be using a computer with normal colors, as are my cohorts. You can accommodate us or not, the burden is on us. But that means we are going to think your website looks bad and/or maybe isn't even worth our time if we have to muck around with tools to be able to use it.

Heres an example of what it does: http://imgur.com/a/giSxg and how bad it can look: http://imgur.com/wlWgC The top is normal, the rest are transformations I'll use (the 2nd image is the one I usually need).

In the meantime, any developer can make their own site more color-blind friendly without waiting for the drivers or the whole web to change. Why wait for someone else to solve a problem you can solve right now?

Deleted comment

I don't think it's as easy as you make it sound. The hypothetical driver would need to map everythink produced for "standard" trichromatic vision "down" to dichromatic vision in a meaningful way, maintaining contrast where it is relevant, but how should the driver know? (Maybe I am overestimating the technical challenge, so please correct me if I am wrong)

I think the solution can only be to make sure semantically relevant differences in color (e.g. different positions in a chart) can be identified by people with dichromatic vision, e.g. by not using the popular disticton of light red vs. light green. Quickly viewing a design through one of those filter programs is no big tasks and should be part of basic accessibility checks.

This doesn't mean you can't use all kinds of colors when they are not relevant to understanding, [edit: removed direct reference to deleted parent content]

Oops i deleted the comment hastily. I don't see the reason why it's impossible to calibrate a mapping according to the specific user's color blindness. That should be enough to cover most cases, apart from the cases where you are actually asked things like "punch the red monkey"

A mapping of a 3 dimensional space to a 2 dimensional space will bring some points (colors) too close together, this happens with the missing color cones. So now the driver tries to correct this by changing the mapping from 3d to 2d color space, in order to move green and red (for example) apart in the eye of the color blind person. The likelihood that this mapping will bring together other colors, which before were meaningfully apart, is high.

The mapping could work like high dynamic range mappings, trying to take into account local image features but this would probably make everything look really garish :(

I agree that a switch/mode in those color-modifying lense programs could be to remap color channels so a color blind person trying to read a specific chart or website could temporarily remap colors in order to better tell apart the colors used.

edit: disclaimer: I don't know about anybody with limited color vision personally so I just try to be careful assuming the problem could be solved easily. If testing with actual people with this condition proves me wrong, great.

This. Thank you for making this point :)

I'm not sure it's that simple (but that's another discussion that's going on right now =)).

Aside from that, some of the design lessons and considerations that come from considering color-blind users tend to be good design principles in general.So - they may be good considerations to make anyways.

I love the way the examples are shown on this website. Very clear and compelling way to demonstrate the issues that come with colourblindness.

A simple heuristic I use is to think about a display in black and white. There should be a way to clearly distinguish or establish contrast between two items (ie. pattern fills in charts)

I'm currently working with the presentation team on a console video game and I've known that we were going to have to address colourblindness in some fashion. This is a fantastic website and perfect for sending out to the team to get people caught up on the issue so that we can start a discussion of how we can make our interface really colourblind friendly.

Currently the teams in our battle mode are identified purely by colour and so this is immediately a potential issue that we'll have to double check to ensure that our colour choices are ok.

The wordfeud example shows that it's possible to create a unique colour scheme for the colourblind even with the more limited palette. A good addition for this site would be a reference guide on where a designer should start when selecting these colours and what will completely not work and should be avoided.

I would have liked to see them attempt to fix Trivial Pursuit. Comparing with Wordfeud doesn't help because a Trival Pursuit board contains more information. What would you use to distinguish player pieces besides color? You can't use different shapes like Monopoly (if you do want to do that, problem solved; just put a Monopoly piece next to your TP piece and move them together).

Agreed. There are a million area's to focus on, I've focused on getting the site online first as to be able to get the site to grow using feedback like this. So thanks!

The solution itself is indeed difficult, the key is providing information by something other thank color alone. But as you mentioned, you're bound to a single basic shape that can't really differ from the rest.

A clearer color palette might work, but there is no guarantee that it might work for every possible type of colorblindness in every possible situation.

You could use black and white patterns, so as long as a person can distinguish contrast, they should be able to differentiate between the pieces.

3D printer, custom pieces with inset shapes, give containers a tab and mark the tabs with shapes as well.

Or just use a Sharpie, or tag problem colors with nail polish. Many ways to hack it.

Reply on news.ycombinator.com