Designing for the Color Blind Audience Priscilla Rodriguez RHET 5307 Dr. Kuralt.

Slides:



Advertisements
Similar presentations
Chris Burfitt Designing for Colour Blindness. What do we mean by ‘Colour Blind’? Actual colour blindness (Monochromacy) is very rare We’re usually talking.
Advertisements

Effective Color Contrast: Designing for People with Partial Sight and Color Deficiencies CSE 491 Michigan State University Fall 2007 Kraemer.
Colors are non-verbal forms of communication. As you design brochures, logos, and Web sites, it is helpful to keep in mind how the eye and the mind perceive.
Making Text Legible: Designing for People with Partial Sight CSCI 4800 Spring 2007 E. Kraemer.
Chapter 9: Color Vision. Overview of Questions How do we perceive 200 different colors with only three cones? What does someone who is “color-blind” see?
Chapter 9: Perceiving Color
Kira Jones Oral Communication Instructor
Color Vision Our visual system interprets differences in the wavelength of light as color Rods are color blind, but with the cones we can see different.
COLOR IN CARTOGRAPHY Four color characteristics important in thematic mapping, meaning the psychological and aesthetic aspects of printed (NOT digital)
DANGER!DANGER!  Inappropriate use of colour can be disasterous to the application.
Web design for color blind users Presented by Rajalekshmy Usha HCI assignment 4 12/11/2001.
Colour Theory Looking at Design & its use in Accessibility Issues Group Members: Rashik Rashik Andy Andy Lee Lee Paul Paul Gareth Gareth.
COLOR PERCEPTION Physical and Psychological Properties Theories – Trichromatic Theory – Opponent Process Theory Color Deficiencies Color and Lightness.
Why use colour? Colour displays are attractive to users and can often improve task performance Benefits: –various colours are soothing or striking to the.
Chapter 7: Color Vision How do we perceive color?.
Color Vision: Sensing a Colorful World
COLORBLINDNESS:COLORBLINDNESS: Invisible Disability John Stiles Ruamrudee International School
Color theory Vocabulary :)
Process of __________, arranging, & ______________ visual elements of art to accomplish or address a particular purpose  Elements of Visual Design 
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Color Theory. Color: Enhances a message Enlivens a presentation Gives an object visual weight and emphasis Adds richness and depth to screen design.
Color in Design. Uses of Color Call attention to specific data or information Identify elements of structure and processes Portray natural objects realistically.
Design Principles. Design Process 1. Define the problem 2. Research the project 3. Create thumbnails and roughs ◦ Thumbnail – small, fast sketches that.
Color. -Visual light -An integral part of the sculpture -Creates desired effect -Distinguish items -Strengthen interest.
Color.
1 Perception and VR MONT 104S, Fall 2008 Lecture 7 Seeing Color.
Color Management. How does the color work?  Spectrum Spectrum is a contiguous band of wavelengths, which is emitted, reflected or transmitted by different.
PHYSIOLOGY OF COLOR VISION
Technology for Students with Special Needs E.Brown Forward.
Elements of Art The basic parts of an artwork.. Elements of art Line Shape Form Color Texture Value Space.
Lesson 13 – Color and Typography. 2 Objectives Discuss basic color theory. Understand the color wheel. Understand how color is presented on a computer.
Chapter 3 Space. Three Kinds of Space Space as format: size, scale, and presentation. Space as the relationships among objects and the areas surrounding.
Understanding Color.
Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.
Color blindness By Robert, Will, John and Enri 7-4.
Chapter 9: Perceiving Color. What Are Some Functions of Color Vision? Color signals help us classify and identify objects. Color facilitates perceptual.
COLOR.
Ch 9 Colors Yonglei Tao School of Computing & Info Systems GVSU.
Color Online A few pointers for your websites & other e- publications Dr. Jennifer Bowie for Electronic Writing & Publishing.
COMPANY PUBLICATIONS Using Color in Publications.
VERITAS Confidential Graphic Design Shashank Deshpande VERITAS Software July, 2003.
Elements of Art Line Shape Value Form ColorSpace Texture.
Using the Elements and Principles of Design in Photography.
Fundamentals of Graphic Communication 3.5 Accessible Design.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.
11.03 What is clothing made up of? Good fashion has a combination of the elements and principles of design.
Opponent Processes Lateral geniculate nucleus (LGN) has cells that are maximally stimulated by spots of light Visual pathway stops in LGN on the way from.
Color in Web Design. Overview: Color Topics Myths & Misconceptions Hexadecimal Notation Color Concepts and Issues.
Color and Color for the Web First, discuss idea of color (some overlap with lecture on HVS) First, discuss idea of color (some overlap with lecture on.
Web Interface Design Basic GUI and Web layouts Fig H.12: Basic Layouts of Web and Graphic User Interfaces.
Is the practical guidance to color mixing and the visual effects of a specific color combination.
Now… The Basics of Design Basic Elements of Design Dots Lines Shapes Color Type Size Direction.
Cartography for Color Blindness Khem So 9/21/2011.
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand concepts used to create digital graphics.
Chapter 9: Perceiving Color. Figure 9-1 p200 Figure 9-2 p201.
Lesson 13 – Color and Typography. 2 Objectives Understand basic color theory. Understand the color wheel. Understand how color is presented on a computer.
Color Theory. Primary Colors Colors that cannot be created by mixing others.
- is the response of vision to the wave-length of light reflected from the surface. - is the response of vision to the wave-length of light reflected from.
Our Color vision is Limited
Color Theory in Web Design
Additive Colour Theory
Color Theory.
Yonglei Tao School of Computing & Info Systems GVSU
Pengkayaan Materi: Guidelines, Principles, and Theories -> COLOR
Color Vision by King Saud University Physiology Dept
Physics of Color.
Color Theory.
Cooper Part II Making Well-Behaved Products Visual Design
Presentation transcript:

Designing for the Color Blind Audience Priscilla Rodriguez RHET 5307 Dr. Kuralt

Color blindness is a visual defect that results in the inability to differentiate between colors. It affects:  8% of Males  0.5% of Females

By understanding what color blindness is and understanding the components of color, Technical Communicators can produce a document that increases its usability amongst the audience. Understanding Color Blindness Understanding Color’s Components More accessibility for users, increasing the document’s usability

There are three types of color blindness that are most common.  Deuteronopia/ Deuteronomaly  Red/green deficiency  Protonopia/ Protanomaly  Red/green deficiency  Tritanopia/ Tritanopia  Blue/yellow deficiency Normal VisionColor Blind Vision Normal Vision

Consider the way images look to the color blind user.

People with normal color vision should see this image. The way users with color blindness would view the image.

For the color blind, the ability to discriminate colors on the color model of Hue- Saturation- Value is reduced. HUE- perceptual attribute associated with elementary color names Strip of color with a range of hues. Ex: “red” or “blue” SATURATION- refers to the amount of white light mixed with the hue. Strip of color with range of saturation from low to high. VALUE- refers to the intensity of light present ( VALUE- refers to the intensity of light present ( Value is also referred to as lightness) Strip of color with range of value from low to high. Hue ranges from Saturation and Value range from The lower the saturation of a color, the more "grayness” present and the more faded the color will appear. HSV color space as a conical object

Choosing color effectively to increase usability  Maximize the contrast between foreground and background colors  Choose colors that contrast in hue  Avoid using colors of similar lightness adjacent to one another To maximize contrast, always use dark types on light or white backgrounds, exaggerate lightness differences between foreground and background colors.

Choosing color effectively to increase usability  Choose dark colors with hues from the bottom half of the hue circle.  For most people with color deficiencies, the lightness of colors in the bottom half of the hue circle tends to be reduced.

Choosing color effectively to increase usability  Avoid contrasting hues form adjacent parts of the hue circle  Color deficiencies make it difficult to tell the difference between colors of similar contrast.

Designing for the Color Impaired  For the color blind audience, meaning should be independent from color  All information using color as a distinction should be evident without it  Accessibility is not just a legal requirement but also about doing the right thing. U.S. Rehabilitation Act states:

Effective illustrations clarify relationships. This Pie Chart lacks other visual cues to assist the color impaired audience to view the information presented.

Consider the view of the color impaired. Tritanopia: inability to discern blue and yellow Protanopia: inability to see the color red or to distinguish red or bluish- green Deuteroanopia: inability to see the color green or to distinguish green and purplish-red

For the color blind audience, Technical Communicators can design manual tabs, pie charts, and other document elements, that make meaning independent of color. This Pie Chart adds textual cues to assist the color impaired audience. This creates better usability and accessibility of the information presented.

Using evaluation tools can help the technical writer better understand the difficulties the color blind audience faces. These websites allow Technical Communicators to simulate their designs as a color impaired user:    

Using Evaluation Tools People with normal color vision should see this image. The way users with color blindness would view the image. This chart is has been corrected by using diagonal lines. By using the vischeck simulator, there is no problem interpreting this chart. Notice how the addition of diagonal lines creates better usability.

Usability and accessibility is a common goal to improve user experience. Choose color schemes that can be easily identified by people with all types of color vision, in consideration with the actual lighting conditions and usage environment. Clearly state color names where users are expected to use color names in communication. Use a combination of different shapes, positions, line types and coloring patterns, to ensure that information is conveyed to all users including those who cannot distinguish differences in color.

Still, Brian. “What’s Accessible for Some Is Better for All.” Intercom January 2011: Print. Roberts, Linda. “Don’t Turn a (Color) Blind Eye.” Intercom January 2011: 30. Print. Smith, Kel. “Universal Design for Digital Media.” Intercom January 2011: Print. Mackiewicz, Jo. “Color: The Newest Tool for Technical Communicators- Redux.” Technical Communication Volume 56.1 (2009): Print. Arditi, Aries. “Effective Color Contrast/ Designing for People with Partial Sight and Color Deficiencies" Lighthouse International, Web. 10 Feb