visual impairments

Visual impairments

8.11.2012Nina Kaijasilta

Petri MyllysMaiju Tompuri

Visual Impairments

• Visual impairments – a matter of definition– Visually impaired, vision impairment,

partially sighted, low vision, legally blind, totally blind, functional loss of vision, eye disorder, retinal degeneration, albinism, cataracts, glaucoma, muscular problems, corneal disorders, diabetic retinopathy, congenital disorders, infection, cortical visual impairment

Visual Impairments

• Visually impaired – categorization between1:– Low vision / partially sighted2

– Blind

• Based on WHO definition– Visual acuity & visual field defect

1 http://www.nkl.fi/fi/etusivu/tietoa/maarittely

2 http://www.nkl.fi/fi/etusivu/tietoa/sanastoengl

Visual Impairments

• 285.389M visually impaired people (2010 estimate)1

– Enough reason to visualization for visually impaired

1 http://www.who.int/blindness/en/

Why to consider?

“A well-designed visualization facilitates the understanding of the key messages, speeds the process and reduces strain.

Great visualizations take into consideration, how people receive and utilize information.”

Näsänen,

2007Accessible design

Why to consider?

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee, creator of WWW

BLINDNESS

Blindness

•The WHO definition from 19721

– Case for revision:• Interesting issue – definition of blindness:• No distinction when it comes to perception of

light

1http://www.who.int/blindness/Change%20the%20Definition%20of%20Blindness.pdf

Blindness

• Another angle: – International Council of Ophthalmology

recommends1

• Blindness: only total vision loss• Low vision: lesser degrees of vision loss• Visual impairment: loss of visual functions at

the organ level

1 Colenbrander 2002, 17

Blindness

• Complete blindness is rare1,2

• So what exactly is visualization and to whom can we visualize?

1 http://www.nkl.fi/fi/etusivu/tietoa/maarittely

2 Nelson 2003, 29

LOW VISION

What’s low vision?

Low vision in the World Health Organization classifications1:

•Moderate visual impairment•Severe visual impairment•visual field loss (loss of peripheral vision).

1http://www.who.int/mediacentre/factsheets/fs282/en/index.html

Severe visual impairment

Moderate visual impairment

Mild vision loss

Snellen chart: http://en.wikipedia.org/w/index.php?title=File:Snellen_chart.svg&page=1

Why does it occur?• Uncorrected refractive errors

(myopia, hyperopia or astigmatism), 43 %• Cataract, 33%• Glaucoma, 2%

World Health Organization1

1http://www.who.int/mediacentre/factsheets/fs282/en/index.html

Low vision

COLOR BLINDNESS

Color blindness

• The colorblind have a narrowed color perception

• There is no treatment or cure for color blindness

Pic: http://understandinggraphics.com/wp-content/uploads/2009/10/color-blind-chart.png

Color vision• Red cones – L cones• Green cones – M cones• Blue cones – S cones

Normal Vision Color Blindness (Protanopia)

Pic: http://www.cis.rit.edu/fairchild/WhyIsColor/Questions/3-4.html

Red-Blind/ ProtanopiaGreen-Blind/ Deuteranopia

Blue-Blind/Tritanopia

Red-Weak/ Protanomaly

Green-Weak/ Deuteranomaly

Blue-Weak/ Tritanomaly

Monochromacy/ Achromatopsia

Normal vision

Simulator: http://www.colblindor.com/coblis-color-blindness-simulator/

Prevalence (Caucasian)

Type Men WomenCone absent 2.4% 0.03%L-cone absent (Protanopia) 1-1.3% 0.02%

M-cone absent (Deuteranopia) 1-1.3% 0.01%

S-cone absent (Tritanopia) 0.001% 0.03%Cone defect 6.3% 0.37%L-cone defect (Protanomaly) 1-1.3% 0.02%M-cone defect (Deuteranomaly) 4.5-5.0% 0.35%

S-cone defect (Tritanomaly) 0.01-0.02% 0.01%

Total 8 - 10% 0.3 – 0.5%

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

Color blindness

Color blindness prevalence

Genetics• Color blindness carried by the X chromosone (recessive)

Color blindness

Ishihara - Color defiency test 1917

Original plates: http://colorvisiontesting.com/ishihara.htm

Color blindness

Hue Color Vision 1949

Color arrangement test 1947

1 Screenshot: http://www.colblindor.com/farnsworth-munsell-100-hue-color-vision-test/#prettyPhoto2 Screenshot: http://www.colblindor.com/color-arrangement-test/

1

2

Color blindness

RGB Anomaloscope 1907

1 Screenshots: http://www.colblindor.com/rgb-anomaloscope-color-blindness-test/2 Pic: https://www.good-lite.com/Details.cfm?ProdID=570

1

2

Color blindness

HOW TO DESIGN?

• What exactly is seeing?– Seeing could be thought as a mental

interpretation of some input

Visualizing for blind?

Visualization methods for persons blind or partially sighted

• Louis Braille (1809 – 1852): braille system

1 http://en.wikipedia.org/wiki/File:Braille_alfabet.jpg

1

How to design for the blind

• Contrast– “-- visual acuity depends on the

contrast” 1

– ”-- contrast sensitivity thus depends on the size of the object” 1

1 Näsänen 2007, 12


Modified from Joel

Schneider’s 3-page

Snellen Chart

• Tactile textures– Boundaries are easy to find1

• Tactile maps

– Abstract concepts can be demonstrated2

1 Anderson 1992, 290

2 Skytt 2012, 10–12.


Pic: http://wiki.openstreetmap.org/w/images/4/44/Tactile_Map_Aachen.jpg

• Tactile combined with sound– IVEO Viewer1

1 Gardner, Bulatov & Kenny 2009

1


“Fig. 1. IVEO SVG image as seen on screen or on the color printed image. (b) Dots embossed with a ViewPlus embosser. Black dots have the maximum height of 0.5 mm and gray dots are smaller. 7 dot heights are possible” (Gardner, Bulatov & Kenny 2009)

• What about Scalable Vector Graphics in mainstream context?


• “To be scalable means to increase or decrease uniformly. In terms of graphics, scalable means not being limited to a single, fixed, pixel size.”

(http://www.w3.org/TR/SVG11/concepts.html)


Bushell 2012

• Screen readers & special displays– Design & development might target

only a specific (seeing) group• Microsoft Windows first not accessible by

screen readers1

1 Vehmas 2005, 130

Distinguishable letters

When a picture is formed into the retina, small details have lower contrast than larger items. 1

1Näsänen 20072Dolan, RGD Ontario 2010

Use bigger letters and graphical elements.Letterforms need to be easily distinguishable 1,2

How to design for low vision

Screenshot: http://www.couchsurfing.org/

Screenshot: http://ripetungi.com/wp-content/uploads/2010/02/twitter-users.png

A good rule of thumb is to ensure at least a 70% difference in color value between e.g. type and a background tone. 2

Brains compensate for a certain range of blur that eye optics create. This applies only to the difference in brightness, not in color. 1

Enough difference in color value

1Näsänen 20072Dolan, RGD Ontario 2010


http://blog.mainstreethost.com/

http://blog.mainstreethost.com/end-of-the-reel-analysis-of-the-online-movie-streaming-dvd-video-game-rental-industry

We see sharply only in the center of the visual field because the amount of ganglian cells reduces when not in the focus point. 1

information needs to be clearly placed, and the layout can be understood with one glance.1

Focus on layout

1Näsänen 2007


Screenshot: http://laitilan.com/

Screenshot: http://www.mtv3.fi/

http://www.mtv3.fi/

Screenshot: http://www.fox.com/

http://www.fox.com/

Every day we do approximately 100 000 eye fixations. Each fixation takes at least 0,15 seconds.1

Avoid animations and flashy content if they don’t bring extra value to the visualization. However, use of graphic visualizations is recommended.1

Is extra bling bling needed?

1Näsänen 2007


Screenshot: http://producten.hema.nl/

http://producten.hema.nl/

There is a wide variance in users’ ability to operate a mouse, keyboard or other input device. Some people may use voice-recognition programs with spoken commands. 1 Make all functionality fully accessible from a keyboard and create content that can be presented in different ways.1

Make it accessible

1Dolan, RGD Ontario 2010


Pic: http://notabilia.net/

• Colors should never be the only method of conveying important information!

This is important

How to design for color blinds

How to design for colorblinds

• Avoid placing red and green together– Also minor color &contrast differences

• Desaturate images to see if they still have impact

1http://blog.templatemonster.com/2012/03/21/designing-colorblind-friendly-website/2 http://www.tfl.gov.uk/assets/downloads/standard-tube-map.pdf

1

2

Bad examples: BBC Online

Sceenshot: http://wearecolorblind.com/example/bbc-online-football-tables/



• In graphs– Place the legend directly

in the chart – Display the type of data

for each element in a tooltip

• Name the color in text as well

Blue Green Purple Red

Bad example: Google Analytics

Sceenshot: http://wearecolorblind.com/example/google-analytics/



• Increase contrast, change hue, add shapes

Bernhard J. & Vaughn Kelso N. 2007


• Use varied icons and shapes

Bernhard J. & Vaughn Kelso N. 2007

Problematic colorsHigh Medium Low

Green and Red Light Green and Yellow Blue and Yellow

Green and Brown Blue and Grey Yellow and Violet

Blue and Purple Green and Grey Dark blue and Black

Green and Blue Green and Black

Pic: http://jfly.iam.u-tokyo.ac.jp/color/


Unambiguous Colors

• For both to colorblinds and non-colorblinds

Black

Orange

Sky Blue

Bluish Green

Yellow

Blue

Vermillon

Reddish Purple

Original Protan Deuter TritanSimulation

Colors: http://jfly.iam.u-tokyo.ac.jp/color/image/pallete.jpg


Curious about color blindness?

• Watch video: ”No such thing as color – what it is like to be colorblind”– http://www.nosuchthingascolor.com/

• We are colorblind - Blog by Tom van Beveren, colorblind (deuteranomally)• http://wearecolorblind.com/

Test your designs

• Color blindness simulation– http://vischeck.com/– http://www.colblindor.com/coblis-color-

blindness-simulator/

• Contrast test– http://www.checkmycolours.com/– http://www.snook.ca/technical/

colour_contrast/colour.html

• Grayscale images and visualizations

Conclusions

• Many people with visual impairments– Create accessible design

• Use guidelines in design– Contrast– Size– Color– Layout– Format

• Anderson, Frances 1992. Art for all the children: approaches to art therapy for children with disabilities. Springfield, Charles C Thomas.

• Bernhard, J.& Vaughn Kelso, N. 2007. Color Design for the Color Vision Impaired.Cartographic Perspectives, 58, p. 61-67.

• Bushell, David 2012. Resolution Independence With SVG. Read 30.10.2012. http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

• Colenbrander, August 2002. Visual Standards: Aspects and Ranges of Vision Loss with Emphasis on Population Surveys. International Council of Ophthalmology. Read 23.10.2012. http://www.icoph.org/downloads/visualstandardsreport.pdf

• Color Blindness. Prevalence. Accessed 01.11.2012. http://www.colour-blindness.com/general/prevalence/

• Dolan, D., A Practical Handbook on Accessible Graphic Design 2010, RGD Ontario• Flück, D. 2012. Colblindor - Color Blindness viewed through Colorblind Eyes. Accessed

30.10.2012. http://www.colblindor.com/• Gabriel-Petit, P. 2007. Ensuring Accessibility for People With Color-Deficient Vision.

Accessed 01.11.2012 http://www.uxmatters.com/mt/archives/2007/02/ensuring-accessibility-for-people-with-color-deficient-vision.php

• Gardner, John; Bulatov, Vladimir & Kelly, Robert 2009. Making Journals Accessible to the Visually-Impaired – The Future is Near. Learned Publishing 22(4) 2009 pp. 314-319. Read 30.10.2012. http://www.viewplus.com/about/abstracts/09learnpubgardner.html

• ICD Update and Revision Platform: Change the Definition of Blindness. World Health Organization. Read 23.10.2012. http://www.who.int/blindness/Change%20the%20Definition%20of%20Blindness.pdf

• Malamed, C. 2012. Designing for Color Blindness. http://understandinggraphics.com/design/designing-for-color-blindness/

• Mariotti, S. P., Global Data on Visual Impairments 2010, World Health Organization

References

References• Nelson, Scott 2003. A Professional Artist and Curator Who Is Blind. Art Beyond Sight – A

Resource Guide to Art, Creativity and Visual Impairments, 28–29. Ed. Axel, Elisabeth & Levent, Nina. New York, AEB & AFB.

• New estimates of visual impairment and blindness: 2010. World Health Organization. Read 23.10.2012. http://www.who.int/blindness/en/

• Näkövammaisuuden määrittely. Näkövammaisten Keskusliitto ry. Read 23.10.2012. http://www.nkl.fi/fi/etusivu/tietoa/maarittely

• Sanastoa englanniksi. Näkövammaisten Keskusliitto ry. Read 23.10.2012. http://www.nkl.fi/fi/etusivu/tietoa/sanastoengl

• Näsänen, Risto 2007. Visuaalisen käytettävyyden opas 2007. Read 18.10.2012. http://www.ttl.fi/fi/ergonomia/kognitiivinen_ergonomia/visuaalinen_kaytettavyys/Documents/Visuaalisen_kaytettavyyden_opas_2007.pdf

• Okabe, M. & Ito, K. 2002. Color Universal Design (CUD) - How to make figures and presentations that are friendly to Colorblind people – Accessed 29.10.2012. http://jfly.iam.u-tokyo.ac.jp/color/

• Saarelma, O. 2012. Värisokeus ja poikkeava värinäkö. Lääkärikirja Duodecim. Accessed 28.10.2012. http://www.terveyskirjasto.fi/terveyskirjasto/tk.koti?p_osio=100&p_artikkeli=dlk00347&p_teos=dlk&p_selaus=7728

• Scalable Vector Graphics (SVG) 1.1 (Second Edition), W3C Recommendation 2011. Read 30.10.2012. http://www.w3.org/TR/SVG11/concepts.html

• Schneider, Joel. 3-page Snellen Chart. Read 25.10.2012. http://www.i-see.org/eyecharts.html/#download

• Skytt, Riitta 2012. Koskettavaa luettavaa. Tukilinja 3–4 2012. Read 16.10.2012. http://www.virtualmagnet.eu/magnet/asiakkaat/Tukilinja/tukilinja_030412.html/

• Van Beveren, T. 2012. A quick introduction to colorblindness. Accessed 30.10.2012. http://wearecolorblind.com/article/a-quick-introduction-to-color-blindness/

• Vehmas, Simo 2005. Vammaisuus. Johdatus historiaan, teoriaan ja etiikkaan [Silvers, Anita 1998, 13-145]. Helsinki, Gaudeamus.

http://www.w3.org/TR/SVG11/concepts.html

http://www.w3.org/TR/SVG11/concepts.html

http://wearecolorblind.com/article/a-quick-introduction-to-color-blindness/