Around the world in 80 shades: Building colorblind accessible data visualisation.

@natdudley Around the world in ! " 80 shades

@natdudley @natdudley

@natdudley @natdudley #$%&'()*+ ,-.#$%&'( )*+,-.#$% &'()*+,-.

@natdudley @natdudley #$%&'()*+ ,-.#$%&'( )*+,-.#$% &'()*+,-. ❌ ❌ ❌ ❌
❌ ❌ ❌ ❌

@natdudley Accessibility is important

@natdudley The insight should be communicated to anyone,

@natdudley The insight should be communicated to anyone, regardless of
ability.

@natdudley @natdudley Attribution: Vanessaezekowitz at en.wikipedia

@natdudley Reduced Sensitivity (Anomalous Trichromat) Complete loss (Dichromacy) % XY
carriers who are of European descent affected Red Cone Protanomaly Protanopia 2% Green Cone Deuteranomaly Deuteranopia 6% Blue Cone Tritanomaly Tritanopia Rare 2 or more Partial monochromacy Full monochromacy Rare

@natdudley 1. Choose better colours 2. Don’t rely on colour
alone

@natdudley @natdudley Credit: Graphiq blog

@natdudley R 94 G 117 B 240

@natdudley R 141 G 157 B 244

@natdudley 0

@natdudley H S L

@natdudley H aturation ightness ue S L

@natdudley @natdudley 0º/360º 120º 240º

@natdudley @natdudley H: 263 S: 80 L: 75

@natdudley H 230 S 83 L 65

@natdudley H 230 S 83 L 75

@natdudley @natdudley 1

@natdudley CIEL*A*B*

@natdudley CIEL*C*Hº

@natdudley 2

@natdudley Chroma.js

@natdudley @natdudley chroma.scale([‘yellow', ‘navy’]) .mode('lch');

@natdudley @natdudley chroma.scale([‘yellow', ‘navy’]) .mode('lch'); chroma.scale([‘yellow', ‘navy’]) .mode(‘lch’); .colors(5);

@natdudley @natdudley chroma.scale(bezierColor) .domain([‘yellow’, ‘green’, ‘navy’], 5) .correctLightness(true);

@natdudley alert(“Be careful with charts with lots of colours!”);

@natdudley colorbrewer2.org

@natdudley Choose better colours 2. Don’t rely on colour alone

svg.append("path") .attr("class", "line") .style("stroke-dasharray", ("3, 3")) // <== This line
here!! .attr("d", valueline(data));

@natdudley Test things.

@natdudley • Find a friend. • Sim Daltonism • Spectrum
Chrome plugin • Chrome high contrast plugin

@natdudley Choose better colours Don’t rely on colour alone

@natdudley Questions?

http://www.beercolor.com/color_blindness1.htm https://www.handprint.com/HP/WCL/color1.html http://www.d3noob.org/2013/01/making-dashed-line-in-d3js.html https://a11ywins.tumblr.com/ http://www.d.umn.edu/~lcarlson/newsletter_mailman_archives/2014q1/000742.html http://a11yproject.com/resources.html https://github.com/seth-myers/highcharts-accessible http://www.xrite.com/-/media/XRite/Files/Whitepaper_PDFs/L10-001_A_Guide_to_Understanding_Color_Communication/ L10-001_Understand_Color_EN.pdf http://bl.ocks.org/mbostock/5577023
http://caniuse.com/#feat=css3-colors http://vanseodesign.com/web-design/color-systems-2/ http://www.aces.edu/dept/fisheries/education/pond_to_plate/documents/ExplanationoftheLABColorSpace.pdf https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283#.af5bje88b http://schepers.cc/authoring-accessible-svg https://www.w3.org/wiki/SVG_Accessibility/ARIA_roles_for_charts http://jsfiddle.net/d6wXV/6/embedded/result/ http://tristen.ca/hcl-picker/#/hlc/7/1.6/02324C/000000 https://www.vis4.net/blog/posts/choropleth-maps/ https://github.com/gka/chroma.js https://www-03.ibm.com/able/news/accessibleanalyticsfull.html http://www.vis4.net/blog/posts/avoid-equidistant-hsv-colors/ http://gka.github.io/palettes/ http://www.brucelindbloom.com/index.html?Eqn_Lab_to_LCH.html https://codepen.io/stevepepple/post/color-scales-for-charts-and-maps http://colorbrewer2.org/ http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker https://www.vis4.net/blog/posts/mastering-multi-hued-color-scales/

Around the world in 80 shades: Building colorbl...

Around the world in 80 shades: Building colorblind accessible data visualisation.

More Decks by Nat

Other Decks in Technology

Featured

Transcript