2017 CSUN Color Contrast


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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • My name is Crystal Baker, I am a Senior Accessibility Solutions Engineer with AT&T’s Corporate Accessibility Technology Office; my focus is on all things web-related. I’ve tried to include a little something for everyone in this presentation, a bit of light-hearted humor, math, history, science, and even technology.

    A small introduction about myself. Of all the disabilities, vision is the one that hits close to home for me. I was born with a cataract, it was removed when I was 2 years old and a lens implant was put in place. I did not lose all of the vision in my right eye, I can see colored blurs, but I am considered legally blind in that one eye. I was actually a part of a study to determine how long lens implants last. Typically one is in their elderly years when they develop a cataract, and therefore pass away within ten years or so after getting their implants. I can attest that a lens implant will last for more than 30 years!

    A funny story on that note is when I reached junior high, I asked if I could play in athletics, would I even be allowed to drive when I turned 16. My ophthalmologist said of course, you can do all of those things, just know that any sharp blow to the head may cause the lens implant to dislodge. So if you’re playing basketball and get hit in the head with the ball or if you’re in a car wreck, that may be a serious situation for you. He never told me the most dangerous thing of all that I might encounter…toddlers! I have had way too many close calls from my own children than I have ever had driving a car or playing sports.
  • You all get to help me solve a years-long debate in the Baker household. This is my trashcan.

    I say this trashcan is grey, my husband says this trashcan is tan. Neither one of us has a color vision deficiency, yet I see a grey trashcan and he sees a tan trashcan.

    So give me a show of hands, how many for tan?
    How many for grey?

    My husband checked the Rubbermaid website while I was putting this presentation together to find out what color they listed the trashcan as, and they no longer sell it in this color apparently, it’s now only available in black and evergreen. I’m sure they could see how many marriages they were tearing apart with this color.

    My point here is that even if you have perfect 20/20 vision, your perception of color will be slightly different from someone else.
  • Johannes Itten is one of the first people to define and identify strategies for successful color combinations.

    Contrast is “the difference in visual properties that makes an object distinguishable from other objects and the background.” In plain English that means “things which look different from one another”, “an obvious difference between two or more things.”
  • Keep in mind that no piece of artwork makes use of only one type of contrast. However one type usually dominates the piece.

    Contrast of Hue occurs when a hue or color is separated and outlined by black or white lines.

    White lines weakens the ‘strength’ and appearance of the color; the colors around the white lines appear darker.

    Black lines strengthen the appearance of the color; the colors around the black lines appear lighter.

    2. Light Dark Contrast is contrast between light values and dark values.

    3. Cold-Warm Contrast refers to the contrast between cool and warm colors. Cool colors are blue, green and purple. Warm colors are red, orange and yellow.

    4. Complimentary Contrast refers to the contrast between complimentary colors, those that are directly opposite to each other on the color wheel.

    5. Simultaneous Contrast is the contrast between two colors that are almost complimentary, but not exactly. It is contrast between a color and another color that is to the right or left of its compliments.

    What is pleasing to the eye requires harmonic balance of the colors. If the colors of something you’re looking at were not balanced, the eye would tinge colorless, gray, or pure colors with the compliment of the colors next to it. Therefore, the reality of the color is effected by it’s surrounding color, and would appear that it has shifted toward it’s surrounding color’s compliment. In other words, a color would look different than what it really is. This effect gives a feeling of excitement and lively vibration of colors of changing intensities.

    The best example I have of this is red and green Christmas lights. When red and green Christmas lights are up it looks like the lights are almost moving. That’s the lively vibration Itten is trying to explain.

    6. Contrast of Saturation. The term refers to the contrast between pure intense colors and dull diluted or grayed colors. Dull colors would appear to be duller when it is placed next to pure intense colors, and pure intense colors would appear more vivid when it is next to a dull color.

    7. Contrast of Extension. Different amounts of one color are needed to balance another. The contrast of extension is used to refer to contrast between the proportion of one area of color to another.

  • As you might have known already, different colors give different feelings and different messages.

    Here is a list of colors and how they are often used symbolically.

    Light giving, gold symbolizing the beyond, sun and light, understanding, knowledge. Pale yellow shows envy, betrayal, falseness, doubt, distrust and unreason.

    Red-orange is dense and opaque showing fiery strength, an expression of passion. Have you heard of the book titled “The Witness Who Wore Red”? It’s written by Rebecca Musser, she was the 19th wife of Polygamist leader Rulon Jeffs. She escaped the FLDS compound and in 2007 took the witness stand against the then new prophet Warren Jeffs. She specifically chose to wear red in the courtroom because red was a forbidden color in FLDS.

    In many cultures, blue symbolizes immortality. Dimmed or darkened blue falls into superstition and grief.

    Green gives the impression of fruitfulness, contentment, and hope. Grayed green has a sense of sad decay. Yellow greens have a feel of a young vigorous force of nature.

    Maximum radiant activity, proud external ostentation. It is no coincidence that Orange is a major brand color for the University of Texas.

    Color of the unconscious, mysterious, impressive and sometimes oppressive. Purple also represents royalty. I do not agree with this one, that Light violet gives a feeling of the terrors of the end of the world and piety.

    In general, all tints (which would be the lighter colors) represent the brighter and better aspects of life, while all shades (the darker colors) represent all the darker, sad, and negative forces.
  • Here’s one for my science geeks…how do we see color?

    [read the slide]

    What are called rods and cones [and that’s exactly what they look like under a microscope, rods and cones] The rods…

    There are three different kinds of cones [one that responds to blue light, one responding to green light, and the third responding to red light.]
  • [read slide]
  • For you visual learners out there, here are examples of the same photo. I believe this is bowls of different colors of powdered dye and how they would be perceived through normal vision, Deuteronopia, Protanopia and Tritanopia.

    The Deuteronopia and Protanopia looks the same in colors, but the Protanopia is actually a bit more vivid in it’s colors compared to the Deuteronopia.
  • Time for more fun facts about color blindness. [read the slide]

    FUN FACT EXTRA: Humans are unusual among mammals for our trichromatic vision – name for the three different types of photopigments we have. Photopigments is referring to those cones, the three cones we have for blue, green, and red. Most mammals, including dogs, have just two cone types. Other creatures, such as butterflies, have more than three. They may be able to see colors we can only imagine.
  • So, can you just eyeball good and bad color contrast? No, not really, but each one of us has those certain colors that raise red flags for ourselves. For me, it’s University of Texas Burnt Orange and Lime Green.

    Oranges in general are very difficult to make accessible, burnt orange even more so. Lime green check marks hold a special place in my heart. Six years ago I was working on a Texas Medicaid project. When you logged into your Medicaid account you were presented with a table that listed every possible service offered by the Texas Medicaid program along with lime green check marks to indicated what services you were eligible for.

    This is why it is important to not rely on color alone as an indicator. They were using checkmarks, so they were half way there, but the lime green check mark on a white background was difficult for everyone to see.

    Long story short they wound up ditching the green check marks all together because it wasn’t clear if the check mark really was indicating the service you were eligible for, or if it was a service you were already receiving or just a reminder of an upcoming appointment.

    You don’t have to guess at good color contrast, super smart people have already figured out the algorithms and necessary color contrast ratios for you.

    But if you have no other means of testing but eyeballing it, view your content in grayscale, print it off using only black and white ink and see if you can still read everything, if icons still make sense, etc.
  • The important thing is making sure you include appropriate contrast as part of your design process. This will allow viewers, no matter how they interpret colors, to read and enjoy your design. Just as choosing the correct color combinations when you were a child would help your picture stand out in a sea of your classmates’ work, choosing correct color combinations when you design will allow your work to stand out in the world of graphic design.

    [read the slide]

    Use subtle shades of natural colors [subtle colors found in nature also make the best choices for most backgrounds and minor elements, especially if type appears on the color].

    …But not too sharp to ease the impact on the readers eyes.
  • The Colour Contrast Analyzer is the tool I often use for testing color contrast. It is very simple to use and free. In my last job, I had zero budget, my position was gifted to another department and literally the only budget that came with me was my salary, no budget for training, no budget for books, no budget for tools. If it wasn’t free AND something I could download to a thumb drive at home, I wasn’t going to get it. There are other tools out there, a simple Google search will bring up several options for you. I’m only going to focus on the color contrast analyzer and color contrast checker tool today to keep us on time.

  • So what’s in a tool?

    [read the slide]

    Passing and failing WCAG 2.0, what does that mean? WCAG 2.0 is an acronym for the Web Content Accessibility Guidelines, version 2.0. It is developed by the World Wide Web Consortium, and is an internationally recognized guide to making web content accessible.
  • The tester is actually testing luminosity. Luminosity is the brightness of a light source of a certain wavelength as it appears to the eye, measured as the ratio of luminous flux to radiant flux at that wavelength. For my math geeks out there here is the formula recommended by the World Wide Web Consortium and used by the color contrast tools.
  • More fun facts before the demo of the color contrast analyzer tool.

    Ah-NOM-Ah-Les-Scope (like anomaly)
  • [use Hobby Lobby]
  • Fun facts!!

    [read the slide]

    Fun Fact extra: While there is no cure for color blindness, people with red-green color blindness may be able to use a special set of lenses to help them perceive colors more accurately. These lenses can only be used outdoors under bright lighting conditions.

    Visual aids have also been developed to help people cope with color blindness.

    There are iPhone and iPad apps, for example, that help people with color blindness discriminate among colors. Some of these apps allow users to snap a photo and tap it anywhere on the image to see the color of that area. More sophisticated apps allow users to find out both color and shades of color.
  • Another polling question, do logos have to meet color contrast ratios, yes or no?

    No, logos do not have to be accessible and meet specific color contrast ratios. HOWEVER, if you just to the right thing, and have a logo with good color contrast it will be remembered, IN A GOOD WAY, by many more customers.

    Incidental text, such as in photographs that happen to include a street sign, are not included. Nor is text that for some reason is designed to be invisible to all viewers. Stylized text, such as in corporate logos, should be treated in terms of its function on the page, which may or may not warrant including the content in the text alternative.
  • Last set of fun facts!!

    [read slide]

    Remember in a previous fun fact, John Dalton wrote the first scientific paper on colorblindness in the late 1700’s.
  • So you likely remember this going around the internet a few years ago – what color is the dress, Blue and Black or White and Gold?

    Show of hands – who sees it as blue and black? Who sees it as white and gold?

    My point with polling you about the trashcan and the dress is to drive home the fact that even if people do not have a color deficiency, even if people are not colorblind, even if people see 20/20, each one of us perceives color in our own way, it’s what makes us human. You will not make everyone in the world happy, it’s impossible. I can see presentations better when it’s white text on a dark blue or black background, many of you can see presentations better when it’s black text on a white background. We cannot be all things to all people, but we can be the most things to most people, and that can start with great color contrast.

    Any questions about this presentation?
    I’ll field them all!

    Did you learn at least one thing that you didn’t know before this presentation?
  • Do not let your budget hinder you, there are free tools available to you.
  • Our chief financial officer always ends his public speaking presentations with an It Can Wait slide. I thought that was a fabulous idea and started doing it too.

    Money means a lot of things to a lot of people.

    Every year 100,000 people who are injured or killed in distracted driving accidents, often caused by texting while driving.

    We do not need that revenue.

    It can wait, take the pledge at itcanwait.com
  • 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