Make icons easily readable for colorblind people

[pzwsk]

I would suggest to use stronger constrasts between colors for icons, particularly between orange and green. This will help colorblind people like me (8% of men pop) to better use the website ;) Tip : try to use different shades, for instance a light green and a dark orange.

[jpmckinney]

I would recommend using a color like blue, which is easy for most color-blind people (like myself) to distinguish from green and red, at a wide variety of lightness and saturation values.

Otherwise, if project owners want to stick to something like orange, I would switch the orange to yellow which would better distinguish it in terms of hue and also in terms of brightness.

I don't believe there is a color people would generally associate to "Unsure", so I figure any color here works.

[jpmckinney]

@piezanowski can you confirm if the screenshot at https://github.com/okfn/opendatacensus/pull/190#issuecomment-25724106 lets you distinguish colors?

[pzwsk]

Thanks @jpmckinney would be really easier for me like this.

[LaurieJ]

@jpmckinney & @piezanowski are the red ("no") and green ("yes") colours acceptable and differentiatable for you folks, or are they an issue as well? (applies to #190 as well as this)

[jpmckinney]

yes and no (green and red) are easy (for me) to differentiate.

[olewin]

Hi,

I just want to add the fact that there are different kinds of colorblindness:

red/green redblind blueblind

I for my part am redblind. Thats a problem because red is the typical signal color in graphics.

There are different RGB schemes for colorblind tested graphics. Would be great if you could use one. If you dont find a proper scheme please just follow the rule to use bright/dark and colors with inherent contrast (lines etc.). If you want to be sure please select white/black for your monitor to make yourself a picture if your choice is the right choice.

Thanks very much for your kindness!

Best Ole

[jpmckinney]

@olewin When you look at the screenshot at https://github.com/okfn/opendatacensus/pull/190#issuecomment-25724106 do you see different colors for "Yes", "No" and "Unsure" in the legend at the bottom?

[pzwsk]

Hi, could we mark this as Urgent ? I am really having issues reviewing countries and seing difference between unsure and yes ...

I think olewin and jpmckinney suggested very good modifications.

Thanks a lot

[rufuspollock]

An alternative idea: use font-awesome icon overlay with http://fortawesome.github.io/Font-Awesome/icon/ban-circle/ (so color plus ban sign to indicate no / unsure)

[jpmckinney]

Sure, but #190 is already an improvement over the current colors for colorblind users. Do people not like blue? What's the problem with #190? We can always implement a ban sign later.

[rufuspollock]

@jpmckinney at least for me blue is not as good as the orange (red, amber, green have common meanings - traffic lights etc). For me its not clear what blue signifies without looking at the key but i immediately get what red, amber green mean ...

[pzwsk]

Agree with you rufus, that's why I would suggest to keep it orange but play on the ligthness/contrast. The problem here is that the green and orange are very similar in terms of ligthness/contrast and then very difficult to distinguish for most of colorblind people.

A good test is to convert the color scheme in B&W and check if we can easily distinguish, if yes then issue is resolved.

Thanks

• Pierre

On Sat, Oct 12, 2013 at 10:19 AM, Rufus Pollock notifications@github.comwrote:

@jpmckinney https://github.com/jpmckinney at least for me blue is _not_as good as the orange (red, amber, green have common meanings - traffic lights etc). For me its not clear what blue signifies without looking at the key but i immediately get what red, amber green mean ...

— Reply to this email directly or view it on GitHubhttps://github.com/okfn/opendatacensus/issues/172#issuecomment-26193441 .

Pierre Chrzanowski Open Knowledge Foundation France

Mail: pierre.chrzanowski@gmail.com Mobile: +33 (0)7 855 71 292 | Skype: pierre.chrzanowski | Twitter: @piezanowski https://twitter.com/piezanowski

[mattfullerton]

Sorry this hasn't been treated with a higher priority - we were treating it as a presentational issue (lower priority until Monday) when clearly it was also impeding data collection. We'll make it a priority to implement an improvement from Monday onwards.

[LaurieJ]

@mattfullerton actually this was a ticket for presentation but #190 was a ticket for reviewers. which is marked as fixed...

[mattfullerton]

190 is marked as open, unmerged and is in the presentation milestone. It could well be that I or someone else moved the milestone, for which I apologise.

[jpmckinney]

@rgrp I don't see how "Unsure" falls between "Yes" and "No" the way "prepare to stop" falls between "go" and "stop". In any case, if we want to stick to those colors, I'll update #190.

[jpmckinney]

See #208 for a version with a darker green. Not as immediately distinguishable for colorblind users as the blue, but still better than the current colors. @piezanowski can you distinguish the colors in the screenshot at https://github.com/okfn/opendatacensus/pull/208#issuecomment-26200672 ?

[pzwsk]

I just noticed a change in colors on the live website. Much easier for me now. What about you @jpmckinney ? Should we mark it as resolved ? Thanks

[jpmckinney]

Yup, good enough for me :)

[LaurieJ]

Just to be clear, can you tell us what link you are looking at where the colours are better? I didn't think we'd done a fix yet!

[pzwsk]

are you sure because on the link below for instance, it seems really better to me http://2013.census.okfn.org/country/overview/France/

On Mon, Oct 14, 2013 at 4:01 PM, Laura James notifications@github.comwrote:

Just to be clear, can you tell us what link you are looking at where the colours are better? I didn't think we'd done a fix yet!

— Reply to this email directly or view it on GitHubhttps://github.com/okfn/opendatacensus/issues/172#issuecomment-26256831 .

Pierre Chrzanowski Open Knowledge Foundation France

Mail: pierre.chrzanowski@gmail.com Mobile: +33 (0)7 855 71 292 | Skype: pierre.chrzanowski | Twitter: @piezanowski https://twitter.com/piezanowski

[jpmckinney]

yes, #208 was merged

[mattfullerton]

Sounds like everybody's happy? Closing.

[olewin]

190 was great.

172 is bad. I for my part cannot see the difference between Unsure/Yes at all. Sorry.

Dr. Ole Wintermann

Bertelsmann Stiftung Carl-Bertelsmann-Straße 256 | 33311 Gütersloh | Germany Phone: +49 5241 81-81232 | Mobile: +49 173 7334421 E-Mail: ole.wintermann@bertelsmann-stiftung.demailto:ole.wintermann@bertelsmann-stiftung.de | www.bertelsmann-stiftung.dehttp://www.bertelsmann-stiftung.de | www.futurechallenges.orghttp://www.futurechallenges.org

The Bertelsmann Stiftung, based in Gütersloh, Germany, is an independent, private operating foundation in accordance with Section 1 of North Rhine-Westphalia's Foundation Law. The district government of Detmold serves as its supervisory authority. Founder: Reinhard Mohn Chairman of the Board of Trustees: Prof. Dr. Werner J. Bauer Executive Board: Aart De Geus (Chair), Liz Mohn (Vice Chair), Dr. Jörg Dräger, Dr. Brigitte Mohn

Von: James McKinney [mailto:notifications@github.com] Gesendet: Montag, 14. Oktober 2013 15:38 An: okfn/opendatacensus Cc: Wintermann, Ole, ST-NW Betreff: Re: [opendatacensus] Make icons easily readable for colorblind people (#172)

Yup, good enough for me :)

— Reply to this email directly or view it on GitHubhttps://github.com/okfn/opendatacensus/issues/172#issuecomment-26255383.

[jpmckinney]

When using the CIELAB color space (the one that most closely matches human perception) the original colors had the following L* (lightness) values:

• green (8bdd3a) 80
• amber (f9b339) 78
• red (dd3d3a) 51

Clearly, the lightness of the green and amber were too close for a color-blind user. The current colors changed the green (66ae1e) to be darker (64), which made it distinctive enough for me and @piezanowski in terms of lightness.

The blue option changed the amber to blue (807de8) with a lightness of 57. In that case, it was the hue, not the lightness, that made the blue distinctive.

I think the issue with the current colors is that for a redblind user, the a* color axis (green-magenta) may not be perceived as well, leaving the b* color axis (blue-yellow). The green and amber are close on the b* axis:

• green (66ae1e) a* -45 b* 60
• amber (f9b339) a* 15 b* 68
• red (dd3d3a) a* 61 b* 39

To make the colors distinctive, if we were to use the same hues, we would need to brighten the amber and darken the red to get the most out of lightness. If we can change hues, it's easy to make the b* values more distinct (as in #190).

Anyway, Adobe has filters to find color-blind-friendly colors, see this article.

[mattfullerton]

@mintcanary Would you like to consider this issue in the design work?

[smth]

This is a very good point, one that we haven't significantly addressed. I was relying on alt text here, but we can do better. I think, as we also need these colours to contrast well with white (icons), I think the best solution is to replace the orange with blue: https://trello-attachments.s3.amazonaws.com/50a39d976403895f5b00ba10/5258123e1d90fc6d2b003257/c46bda93a31cd133811014e0107ea3e0/colourblind-test.jpg (second set of images are simulating deuteranopia)

Thoughts?

[olewin]

Hi,

first: thanks very much for all your help in building the right color scheme. I - and also all color blind users in the future - appreciate your work very much!

Changing orange into light blue is very useful because orange can be very problematic for both red and green blind people. The worst combination for most colorblind people are red/green/brown/orange binary combinations.

Best Ole

[pzwsk]

Agree with Ole, and thanks for the efforts.

On Wed, Oct 16, 2013 at 11:33 AM, olewin notifications@github.com wrote:

Hi,

first: thanks very much for all your help in building the right color scheme. I - and also all color blind users in the future - appreciate your work very much!

Changing orange into light blue is very useful because orange can be very problematic for both red and green blind people. The worst combination for most colorblind people are red/green/brown/orange binary combinations.

Best Ole

— Reply to this email directly or view it on GitHubhttps://github.com/okfn/opendatacensus/issues/172#issuecomment-26404248 .

Pierre Chrzanowski Open Knowledge Foundation France

Mail: pierre.chrzanowski@gmail.com Mobile: +33 (0)7 855 71 292 | Skype: pierre.chrzanowski | Twitter: @piezanowski https://twitter.com/piezanowski

[shevski]

Happy with the design using light blue - thanks Sam!