SlideShare a Scribd company logo
1 of 15
Web Design for Color Blind
Users
Introduction
Color Blindness
Why should we consider this issue?
How can we create a assessable site for the
 colorblind?
Examples of websites
Conclusions
Q & A
REFERENCES
Color blindness is inability to perceive
  differences between some of the colors
Hereditary genetic disorder
 8 to 10 % men & 0.5 % women
 Primary (Red, Green, Blue) colors
                                  What are the primary
                                        colors ?



   By mixing together various amounts of red, green
    and blue light, you can make almost any color.
   The most common examples of this are television
    screens and computer monitors.
Types color blindness
  Monochromacy
    • Rod monochromacy (Achromatopsia)
    • Cone monochromacy

  Dichromacy
    • Protanopia
    • Deuteronopia
    • Tritanopia

  Trichromacy
    • Protanomaly
    • Deuteranomaly
    • Tritanomaly
 Web site accessible

 A high percentage of users

  Ranked well with the search engines

 professional

 Targeting smartphones, and similar
  technological devices
 Testing
1-
    Test 1    Test 2




2- Color Scheme Designer
3- Test the Image
4- Colorblind Web Page Filter
Good Examples
   Google




   Humble Indie Bundle
Bad Examples
   www.bbc.co.uk/sport/football/tables




   www.google.ca/analytics
 Good Color Combinations




Bad Color Combinations
Graphs and Maps  
Bottom




Color Name
 
Color blindness is inability to distinguish among some
color combinations. colorblind about 8-10% of males and 0.5%
of females, so it is common enough to be an important factor in
a high degree of design. The color combinations red-green color
blindness is the most common, followed by color blindness,
yellow and blue.
        To avoid problems for users with color blindness, make
sure that the distinctive color objects. Using variations in
brightness to make the colored areas distinct, and test your
interfaces in some website has special tool and grayscale to
confirm that they are still usable.
WIKI Link : https://dal.ca.campuspack.net/Groups/CSCI_6606_-
_Human_Factors_in_On-Line_Information_Systems_-
_2013/Seminar_Presentations_-_CSCI_6606/Color_Blindness_and_Web_site
 Berson EL. Visual function testing: clinical correlations. In: Tasman W, Jaeger EA,
    eds. Duane's Foundations of Clinical Ophthalmology 15th ed. Philadelphia, Pa:
    Lippincott Williams & Wilkins; 2009:chap 14.

 Brettel, H., Vienot, F. & Mollon, J.D. (1997). Computerized simulation of color
    appearance for dichormats. Journal of the Optical Society of American A, 14, 10.
    2647-2655.

 Newman, Chuck (2000). Considering the Color-Blind. Web Techniques.

 Parise, Mario (2005). Color Theory for the Color-Blind. Digital Web Magazine.




 

More Related Content

Viewers also liked

Color blind user
Color blind userColor blind user
Color blind userMoh Sem
 
Affirming Diversity: More Than One Is A Group
Affirming Diversity:  More Than One Is A GroupAffirming Diversity:  More Than One Is A Group
Affirming Diversity: More Than One Is A GroupKeith Smith
 
Kschmidt edu510week6writtenassignment
Kschmidt edu510week6writtenassignmentKschmidt edu510week6writtenassignment
Kschmidt edu510week6writtenassignmentKeith Smith
 
La geosfera para la revista
La geosfera para la revistaLa geosfera para la revista
La geosfera para la revistatongasw
 
Environmental Impacts of the Locavore Movement
Environmental Impacts of the Locavore MovementEnvironmental Impacts of the Locavore Movement
Environmental Impacts of the Locavore Movementcj_gregory
 
Definite and indefinite articles thursday
Definite and indefinite articles thursdayDefinite and indefinite articles thursday
Definite and indefinite articles thursdayAnel Correa
 
Descriptive essay
Descriptive essayDescriptive essay
Descriptive essayKeith Smith
 
Visual Impairments
Visual ImpairmentsVisual Impairments
Visual ImpairmentsPetri Myllys
 

Viewers also liked (13)

Color blind user
Color blind userColor blind user
Color blind user
 
Appso team no 70
Appso team no 70Appso team no 70
Appso team no 70
 
Affirming Diversity: More Than One Is A Group
Affirming Diversity:  More Than One Is A GroupAffirming Diversity:  More Than One Is A Group
Affirming Diversity: More Than One Is A Group
 
El perro de las dos presas ddd
El perro de las dos presas dddEl perro de las dos presas ddd
El perro de las dos presas ddd
 
Kschmidt edu510week6writtenassignment
Kschmidt edu510week6writtenassignmentKschmidt edu510week6writtenassignment
Kschmidt edu510week6writtenassignment
 
La geosfera para la revista
La geosfera para la revistaLa geosfera para la revista
La geosfera para la revista
 
Environmental Impacts of the Locavore Movement
Environmental Impacts of the Locavore MovementEnvironmental Impacts of the Locavore Movement
Environmental Impacts of the Locavore Movement
 
Modulterancangkebarangkalian1
Modulterancangkebarangkalian1Modulterancangkebarangkalian1
Modulterancangkebarangkalian1
 
Definite and indefinite articles thursday
Definite and indefinite articles thursdayDefinite and indefinite articles thursday
Definite and indefinite articles thursday
 
Descriptive essay
Descriptive essayDescriptive essay
Descriptive essay
 
Agriculture
AgricultureAgriculture
Agriculture
 
29 habits of_a_rainmaker-2
29 habits of_a_rainmaker-229 habits of_a_rainmaker-2
29 habits of_a_rainmaker-2
 
Visual Impairments
Visual ImpairmentsVisual Impairments
Visual Impairments
 

Similar to Color blind user

2017 CSUN Color Contrast
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color ContrastCrystal Baker
 
How to design for Colorblind User ?
How to design for Colorblind User ?How to design for Colorblind User ?
How to design for Colorblind User ?T-Design Center
 
Emotional Impact of Colors Using Web-Design
Emotional Impact of Colors Using Web-DesignEmotional Impact of Colors Using Web-Design
Emotional Impact of Colors Using Web-DesignIRJET Journal
 
Bojan Kocijan - Collaboration designer, pm, developer - It's a team effort
Bojan Kocijan - Collaboration designer, pm, developer - It's a team effortBojan Kocijan - Collaboration designer, pm, developer - It's a team effort
Bojan Kocijan - Collaboration designer, pm, developer - It's a team effortSerbian Product Community
 
Accessibility and Color: Addressing Color Blindness in the User Experience
Accessibility and Color: Addressing Color Blindness in the User ExperienceAccessibility and Color: Addressing Color Blindness in the User Experience
Accessibility and Color: Addressing Color Blindness in the User ExperienceDave Cooksey
 
Colorblindness and design
Colorblindness and design Colorblindness and design
Colorblindness and design kaikikazuki
 
Designing for the User
Designing for the UserDesigning for the User
Designing for the UserDevon Walker
 
Enabling your disabled market through UX
Enabling your disabled market through UXEnabling your disabled market through UX
Enabling your disabled market through UXMark Flint
 
Tips for Effective Color Usage
Tips for Effective Color UsageTips for Effective Color Usage
Tips for Effective Color UsageNina Elias
 
Visual and Digital Shade Analysis of Vital Human Teeth
Visual and Digital Shade Analysis of Vital Human TeethVisual and Digital Shade Analysis of Vital Human Teeth
Visual and Digital Shade Analysis of Vital Human TeethMick Muianga
 
The Saga of Accessible Colors
The Saga of Accessible ColorsThe Saga of Accessible Colors
The Saga of Accessible ColorsTed Drake
 
IT 7113 Research Project
IT 7113 Research ProjectIT 7113 Research Project
IT 7113 Research Projectit7113group15
 
Mathematical Modeling of Age Differences in Hierarchical Navigation Systems
Mathematical Modeling of Age Differences in Hierarchical Navigation SystemsMathematical Modeling of Age Differences in Hierarchical Navigation Systems
Mathematical Modeling of Age Differences in Hierarchical Navigation SystemsPanayiotis Zaphiris
 
CMS 115: Creating Accessible MSU Web Content
CMS 115: Creating Accessible MSU Web ContentCMS 115: Creating Accessible MSU Web Content
CMS 115: Creating Accessible MSU Web ContentMontana State University
 
Presentation Visuals
Presentation VisualsPresentation Visuals
Presentation Visualsbthat
 
UX & Color Blindness
UX & Color BlindnessUX & Color Blindness
UX & Color BlindnessDave Cooksey
 
Designing for Accessibility - WordCamp London 2017
Designing for Accessibility - WordCamp London 2017Designing for Accessibility - WordCamp London 2017
Designing for Accessibility - WordCamp London 2017Graham Armfield
 

Similar to Color blind user (20)

2017 CSUN Color Contrast
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color Contrast
 
How to design for Colorblind User ?
How to design for Colorblind User ?How to design for Colorblind User ?
How to design for Colorblind User ?
 
Emotional Impact of Colors Using Web-Design
Emotional Impact of Colors Using Web-DesignEmotional Impact of Colors Using Web-Design
Emotional Impact of Colors Using Web-Design
 
Bojan Kocijan - Collaboration designer, pm, developer - It's a team effort
Bojan Kocijan - Collaboration designer, pm, developer - It's a team effortBojan Kocijan - Collaboration designer, pm, developer - It's a team effort
Bojan Kocijan - Collaboration designer, pm, developer - It's a team effort
 
Accessibility and Color: Addressing Color Blindness in the User Experience
Accessibility and Color: Addressing Color Blindness in the User ExperienceAccessibility and Color: Addressing Color Blindness in the User Experience
Accessibility and Color: Addressing Color Blindness in the User Experience
 
Colorblindness and design
Colorblindness and design Colorblindness and design
Colorblindness and design
 
Designing for the User
Designing for the UserDesigning for the User
Designing for the User
 
Enabling your disabled market through UX
Enabling your disabled market through UXEnabling your disabled market through UX
Enabling your disabled market through UX
 
Tips for Effective Color Usage
Tips for Effective Color UsageTips for Effective Color Usage
Tips for Effective Color Usage
 
Colour Display
Colour DisplayColour Display
Colour Display
 
The Magnificent Seven
The Magnificent SevenThe Magnificent Seven
The Magnificent Seven
 
Visual and Digital Shade Analysis of Vital Human Teeth
Visual and Digital Shade Analysis of Vital Human TeethVisual and Digital Shade Analysis of Vital Human Teeth
Visual and Digital Shade Analysis of Vital Human Teeth
 
The Saga of Accessible Colors
The Saga of Accessible ColorsThe Saga of Accessible Colors
The Saga of Accessible Colors
 
IT 7113 Research Project
IT 7113 Research ProjectIT 7113 Research Project
IT 7113 Research Project
 
Building websites for all
Building websites for allBuilding websites for all
Building websites for all
 
Mathematical Modeling of Age Differences in Hierarchical Navigation Systems
Mathematical Modeling of Age Differences in Hierarchical Navigation SystemsMathematical Modeling of Age Differences in Hierarchical Navigation Systems
Mathematical Modeling of Age Differences in Hierarchical Navigation Systems
 
CMS 115: Creating Accessible MSU Web Content
CMS 115: Creating Accessible MSU Web ContentCMS 115: Creating Accessible MSU Web Content
CMS 115: Creating Accessible MSU Web Content
 
Presentation Visuals
Presentation VisualsPresentation Visuals
Presentation Visuals
 
UX & Color Blindness
UX & Color BlindnessUX & Color Blindness
UX & Color Blindness
 
Designing for Accessibility - WordCamp London 2017
Designing for Accessibility - WordCamp London 2017Designing for Accessibility - WordCamp London 2017
Designing for Accessibility - WordCamp London 2017
 

Color blind user

  • 1. Web Design for Color Blind Users
  • 2. Introduction Color Blindness Why should we consider this issue? How can we create a assessable site for the colorblind? Examples of websites Conclusions Q & A REFERENCES
  • 3. Color blindness is inability to perceive differences between some of the colors Hereditary genetic disorder  8 to 10 % men & 0.5 % women
  • 4.  Primary (Red, Green, Blue) colors What are the primary colors ?  By mixing together various amounts of red, green and blue light, you can make almost any color.  The most common examples of this are television screens and computer monitors.
  • 5. Types color blindness Monochromacy • Rod monochromacy (Achromatopsia) • Cone monochromacy Dichromacy • Protanopia • Deuteronopia • Tritanopia Trichromacy • Protanomaly • Deuteranomaly • Tritanomaly
  • 6.  Web site accessible  A high percentage of users   Ranked well with the search engines  professional  Targeting smartphones, and similar technological devices
  • 7.  Testing 1- Test 1 Test 2 2- Color Scheme Designer 3- Test the Image 4- Colorblind Web Page Filter
  • 8. Good Examples  Google  Humble Indie Bundle
  • 9. Bad Examples  www.bbc.co.uk/sport/football/tables  www.google.ca/analytics
  • 10.  Good Color Combinations Bad Color Combinations
  • 13. Color blindness is inability to distinguish among some color combinations. colorblind about 8-10% of males and 0.5% of females, so it is common enough to be an important factor in a high degree of design. The color combinations red-green color blindness is the most common, followed by color blindness, yellow and blue. To avoid problems for users with color blindness, make sure that the distinctive color objects. Using variations in brightness to make the colored areas distinct, and test your interfaces in some website has special tool and grayscale to confirm that they are still usable.
  • 14. WIKI Link : https://dal.ca.campuspack.net/Groups/CSCI_6606_- _Human_Factors_in_On-Line_Information_Systems_- _2013/Seminar_Presentations_-_CSCI_6606/Color_Blindness_and_Web_site
  • 15.  Berson EL. Visual function testing: clinical correlations. In: Tasman W, Jaeger EA, eds. Duane's Foundations of Clinical Ophthalmology 15th ed. Philadelphia, Pa: Lippincott Williams & Wilkins; 2009:chap 14.  Brettel, H., Vienot, F. & Mollon, J.D. (1997). Computerized simulation of color appearance for dichormats. Journal of the Optical Society of American A, 14, 10. 2647-2655.  Newman, Chuck (2000). Considering the Color-Blind. Web Techniques.  Parise, Mario (2005). Color Theory for the Color-Blind. Digital Web Magazine.