Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2017 CSUN Color Contrast

379 views

Published on

Color helps us distinguish objects from each other and guides our attention to and away from things. This presentation will help you understand the issues.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

2017 CSUN Color Contrast

  1. 1. © 2016 AT&T Intellectual Property. All rights reserved. AT&T, Globe logo, Mobilizing Your World and DIRECTV are registered trademarks and service marks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks are the property of their respective owners. March 1, 2017 Color Contrast A deep dive into our colorful world Crystal Baker Senior Accessibility Solutions Engineer AT&T Corporate Accessibility Technology Office (CATO)
  2. 2. POLL: Is the trashcan tan or grey? TAN GREY
  3. 3. 3 When we survey the characteristics of color effects, we can detect seven different kinds of contrast…Each unique in character and artistic value, in visual, expressive, and symbolic effect; and together they constitute the fundamental resource of color design. -Johannes Itten
  4. 4. 4 Itten’s Color Theory 1. Contrast of Hue 2. Light-Dark Contrast 3. Cold-Warm Contrast 4. Complementary Contrast 5. Simultaneous Contrast 6. Contrast of Saturation 7. Contrast of Extension
  5. 5. 5 Color Expression  Yellow – light giving  Red – fiery strength  Blue - passive  Green – fruitfulness  Orange - radiant  Violet - mysterious
  6. 6. 6 Fun Facts  99% of all colorblind people are not really color blind but color deficient; the term color blindness is misleading.  Color blindness is more prevalent among males than females.  “What color is this?” is the most annoying question you can ask your colorblind friend.  Ishihara plates are the best known color blindness tests, but they are not the most accurate ones.
  7. 7. How do we see color?  The human eye sees by light stimulating the retina, a lining inside the back of the eye. The retina is made up of what are called Rods and Cones.  The rods, located on the outer edge of the retina, give us our night vision but cannot distinguish color.  Cones, located in the center of the retina, are not much good at night but do let us perceive color during daylight conditions.  Color-detecting molecules, photopigments, are located in the cones. There are three different kinds of cones that respond to blue, green and red light.
  8. 8. 8 Three main types of colorblind categories: 1. Color Vision Deficiency:  deutan - Red, orange, yellow, green appear shifted in hue towards red  protan –Red, orange, yellow, and yellow-green appear shifted in hue towards green  tritan – Blue shifts toward green, and yellow shifts toward violet 2. Dichromasy – one cone isn’t functioning properly at all. They see no perceptible difference between red, orange, yellow, and green. 3. Monochromasy – total colorblindness, where the individual only sees black and white and the various shades of grey in between.
  9. 9. 9 Color Vision Deficiency Examples Normal Vision Deuteronopia Protanopia Tritanopia
  10. 10. 10 Fun Facts  The terms protan, deutan, and tritan are Greek and translate to first, second, and third.  A father can’t pass his red-green color blindness on to his sons.  If a woman is red-green colorblind, all her sons will also be colorblind.  Dogs are not colorblind.
  11. 11. 11 Can you just eyeball it?
  12. 12. 12 How to Use Contrast in Color  If you are not experienced in working with color, keep color schemes conservative, conventional, and simple.  Use subtle shades of natural colors.  Avoid bold, highly saturated primary colors except in areas of maximum emphasis, and even then, use caution.  Choose colors that reside on the same quadrant of the color wheel.  Type must always contrast sharply with background colors to be readable.
  13. 13. Testing Color Contrast  Colour Contrast Analyser by The Paciello Group  Color Contrast Checker by Web AIM 13
  14. 14. Tools  The tools help you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.  The tools are a pass/fail assessment against WCAG 2.0 color contrast success criteria.  The tools are a simulation of certain visual conditions, including dichromatic color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision.  The tools are *FREE*.
  15. 15. Luminosity Contrast Ratio  (L1 + 0.05)/(L2 + 0.05)  L1 is the luminosity of the lighter of the text or background colors  L2 is the luminosity of the darker of the text or background colors.  Note 1: The luminosity of a color is defined as 0.2126 * ((R / FS) ^ 2.2) + 0.0722 * ((B /FS) ^ 2.2).  R, G, and B are the red, green, and blue RGB values of the color.  FS is the maximum possible full scale RGB value for R, G, and B (255 for 8 bit color channels).  The “^” character is the exponentiation operator.  Note 2: Luminosity values can range from 0 (black) to 1 (white), and luminosity contrast ratios can range from 1 to 21.
  16. 16. Fun Facts  Colorblind people feel disabled in everyday life, and almost nobody recognizes this.  John Dalton wrote the first known scientific paper regarding color blindness in 1794.  In certain countries you need normal color vision to get a drivers license.  The anomaloscope is the most accurate color blindness test known today.
  17. 17. Demo  Colour Contrast Analyzer  Color Contrast Checker
  18. 18. 18 Fun Facts  Red-green color blindness is a recessive sex linked trait, which causes more men to be colorblind than women.  Blue-yellow color blindness is a dominant, not sex linked, trait, which means both men and women are equally affected.  Many colorblind people have problems with matching clothes and buying ripe bananas.  There is no treatment or cure for color blindness.
  19. 19. POLL: Do logos have to meet color contrast ratios? YES NO
  20. 20. 20 Fun Facts  John Dalton believed his whole life that the cause of his color blindness is a colored fluid inside his eye balls.  Police officer, firefighter, and airline pilot are the most famous jobs requiring normal color vision.  Quite a lot of people with normal color vision can’t pass an Ishihara plates test free of errors.  The International Colour Vision Society is scientifically investigating every aspect of color vision and color vision deficiency.
  21. 21. s blue and blac k or whit e and gold ?
  22. 22. Presentation Resources  http://www.color-blindness.com/2009/01/06/50-facts-about-color-blindness/  http://colorvisiontesting.com/color2.htm  http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/  https://nei.nih.gov/health/color_blindness/facts_about  http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without- color.html  http://www.color-blindness.com/  http://www.loveofgraphics.com/graphicdesign/color/colorcontrast/
  23. 23. Tool Resources  http://www.paciellogroup.com/resources/contrastanalyser/  http://webaim.org/resources/contrastchecker/  http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_ to_improve_the_accessibility_of_your_design/
  24. 24. 25 Upcoming AT&T Presentations at CSUN WEDNESDAY 4:20PM AT&T Mobile and Desktop chat with ARIA: A Look Under the Hood Glenn Bradford - Gaslamp AB, 2nd Floor, Seaport Tower FRIDAY 9:00AM The Art of Language in Accessibility Crystal Baker - Balboa C, 2nd Floor, Seaport Tower 9:00AM The Ongoing Challenge: Mobile Accessibility Testing Jean Swart - La Jolla B, 2nd Floor, Seaport Tower 3:20PM A11y Lab: Conquering Mobile Accessibility though Device Analysis Cory Cain and Glenn Bradford - Balboa C, 2nd Floor, Seaport Tower

×