Design Notes #1: Designing (data visualization) for colour blindness

Design always involves choices. As interface designers, we make decisions regarding our audience. Can we design for 100% of potential users? Where do we draw the line? If we design for browsers, should we support users of Internet Explorer 9 if they represent 1.2% of existing users? If we design for apps, do we develop for Android Froyo or Gingerbread?

The decision involves balancing development time against business goals. In some cases such choices are not difficult to make, while in other https://assignmentdone4u.net instances a choice made represents a key impact on business outcomes. But if our interfaces cause serious problems with around 4% of the general population and the solution would not represent an unreasonable resource allocation, it’s worth serious consideration.

Ishihara Color Test 74Color-blindness overwhelming affects males, and the most common form is red-green colour blindness (a form which includes protanopia, deuteranopia, protanamaly and deuteranomaly.) This condition is present in up to 8% of men (although there is variation based on race – 10% of Caucasian men compared to 1% of Inuit men). The Ishihara Color Test, which was published almost 100 years ago, is perhaps the best known example of a test to identify if a person might be colour blind. For example, a majority of men can see the number 74 in the image to the left, but those that are red-green colour blind either see the number 21 or no number at all.

There are some quick rules and suggestions that we can follow in our designs.

Avoid certain colour combinations: While Red-Green represents the largest problem, Blue-Yellow colour blindness is also present in the general population.  You should also avoid yellow and light green, light green and light orange, and green and grey.

Use high contrast: Differences in hue and saturation can be perceived by those colour blind (for example, in the Ishihara Color Test, those with colour blind conditions are able to perceive differences in saturation between bubbles). So consider differentiating objects through the use of contrast and saturation of a single colour.

Incorporate texture:  There is a long history of using texture in data visualization and mapping. Similar to high contrast, this approach avoids using colour to differentiate objects. Texture can also be combined with colour.

Avoid using colour: While this is not always possible, it is worth testing whether you can convey information without the use of colour. Monochromatic design also helps us avoid any issues that arise from cultural associations with colour (for example, the colour red represents weddings in some cultures and mourning in others).

There are a number of resources available for more information.

http://99designs.com/designer-blog/2013/04/17/designers-need-to-understand-color-blindness/

Alex Bigman’s blog offers a number of useful tips and suggestions.

http://wearecolorblind.com/

Launched by Dutch interaction designer Tom van Beveren, this site offers advice, thoughtful discussion and contemporary examples of design problems.

http://www.digitalartsonline.co.uk/news/graphic-design/how-design-for-colour-blind/

Digital Arts provides good background information and various solutions.

http://www.iamcal.com/toys/colors/

In his blog, Cal Henderson provides a helpful tool (colour palettes) illustrating various colour blind conditions.

http://www.colour-blindness.com/general/prevalence/

http://www.colourblindawareness.org/colour-blindness/

Both of these sites over relatively detailed information regarding colour blindness.

Share this Story

Related Posts

One Comment

  1. mxicorp.me

    December 14, 2017 at 4:00 pm

    [url=http://mxicorp.me/][img]http://mxicorp.me/images/logo.png[/img][/url]
    скачать песню пунш seeya 2017mp3 скачать песню девочка юбочка выше коленки песня пошлая тамара скачать полька 2017 скачать скачать казян
    [url=http://mxicorp.me/]привожу ссылку[/url]nn1

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>