There is also total colour blindness (highly rare), in which vision is typically monochromatic (although not necessarily black & white) Don’t think that it’s all red-green and blue-yellow you have to take care of – there are many colours that may be inseparable perceptually As always, designing for all colour vision deficiencies will also improve colour accuracy performance of those with normal colour vision

Segregation (+ separation from background) Preattention Grouping (same/similar together, clusters) Individuation (separating individuals) + Identification (identifying individuals) Matching (matching identicals across space) Symbolism (not covered)

For preattentive focus guiding, use colour sparingly – introduce one at a time, no overlap over color areas. Rest in greyscale Colored area big enough for color to work (test and then make 10-30% bigger to be on the safe side – viewing distances differ a lot) Any one color is ok, if sufficiently different (>25%) lightness from greys Prefer Green OR Red (red having a lower seek factor) as M&L cones both pick up red wavelengths

Colour Blindness & Data Visualisation Some Basics Color Blindness Test Chart No. 5, Akira Shimizu, 1963

Tritan simulation What is Colour Blindness Normal color vision Protanopia Deuteranopia Tritanope Sensitivity graphs from: Masataka Okabe and Kei Ito, ’How to make figures and presentations …’ Standard stimulus Protan simulation Deutan simulation Confusion (Very close hues with low saturation or ligthness) Red-green also: violet-purple, red-black, green-yellow, etc. Blue-yellow also blue-green, yellow-violet, etc. Protanomaly Deuteranomaly Tritanomaly 1% 1% 1% 6% 1% 99.5%/ 92% Red-green also: green-brown, blue-purple, etc. ~0% modified blue

Why Colour in Data Visualisation? Matching Segregation Preattention Grouping Identification X X Y Z S Q R

Preattention Too many colours Overlapping colours Confusing colour selection One colour (at a time) No colour overlap Luminosity differences 2-cone colour

Segregation Red-green pair No lightness difference Low shape/continuity help Simultaneous luma + chroma display Green + Purple Enhanced luma difference Adapted from: Masataka Okabe and Kei Ito, ’How to make figures and presentations …’

Segregation – remember also… Different colors have different physical wavelengths and diffract differently in lenses, causing a shift in the point of focus as a function of the wavelength. This can make reading text quite difficult & tiresome for colors the wavelength of which is wide apart. Chromatic aberration due to colours from opposing ends of visible wavelength (hue) Too high saturation No lightness difference

Grouping Too many simultaneous overlapping colours No lightness differences No shape differences, no gestalt grouping Start with one color, switch others on|off Use shape, outline (& pattern fill) Enhance lightness differences Gestalt group if possible (lines, re-order)

Inviduation & Identification Thicker lines Shape differences Braille imprint! Higher contrast Colour selection still bad Too many colors & too thin lines – separate No lightness or texture differences Names separate from lines (color only coding) Location based identification hard (line spaghetti)

Matching Too many colors & too thin lines No lightness or shape differences Identification hard, matching impossible Location identification hard – too many lines Additional line shape coding (identification) Legend next to lines (matching) Larger plot area : more color & white space

Simulation Deuteranopia Tritanopia Protanopia Original Map Using Color Orcale 1.1 Available for Windows, OS X and Linux (Java 6) OK under all simulations Works even in greyscale Works with reduced lightness & contrast Simulation is approximation Simulation is no substitute for user testing

Heuristics: what NOT to do Do not use colour only to segregate, group & identify Do not colour only to express style, mood or trend Do not use standard colour palettes in applications Do not use as many colours as data categories (3+) Do not use hue only or very low lightness difference Do not fix the colours in applications, let users choose Do not skip simulation & testing Do not think you know everything by now Do not think you will remember this after 20 minutes Do not think you will ‘fix this later’ Assume affects only 4% of population, so why care

Heuristics: What to DO Start with greyscale Use strong perceived lightness differences (20%) Pick a safe palette (see links) Introduce colors one by one Avoid problem combos (see ref) Simulate color vision deficiencies Test with real users under various conditions Practice, Rinse & Repeat Read the further information to learn more

Further Information & Tools colorschemedesigner.com www.colorjack.com/sphere www.vischeck.com bit.ly/colourblindsim wearecolorblind.com colblindor.com colorhelper.com bit.ly/sim-daltonism colororacle.cartography.ch bit.ly/accessibility_wheel colorfilter.wickline.org checkmycolours.com variantor.com/en CS4

Thank you! Color Blindness Test Chart No. 10 - Akira Shimizu, 1963