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

by tomvb • 14 years ago

43 15 14 years ago

nchlswu2• 14 years ago

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)

kaiwetzel• 14 years ago

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/

mvzink• 14 years ago

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.

zerostar07• 14 years ago

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.

hexis• 14 years ago

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?

tomvb2• 14 years ago

This. Thank you for making this point :)

nchlswu2• 14 years ago

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.

cbs• 14 years ago

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

SkyMarshal• 14 years ago

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/

praxeologist• 14 years ago

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.

Tiktaalik• 14 years ago

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.

tedunangst• 14 years ago

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

tomvb2• 14 years ago

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.

FreeFull• 14 years ago

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.

yirt• 14 years ago

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.

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

Related Stories