Recommended
More Related Content
Viewers also liked
Viewers also liked (16)
Similar to Csun2017 design-with-color-031417a
Similar to Csun2017 design-with-color-031417a (12)
Recently uploaded
Recently uploaded (20)
Csun2017 design-with-color-031417a
- 1. © Copyright IBM Corporation 2017 IBM Accessibility Designing with Color, a collaborative curiosity! 3/14/2017
- 2. © Copyright IBM Corporation 2017 Introducing Charu… Designing with Color | IBMAccessibility Charu Pandhi 2
- 3. © Copyright IBM Corporation 2017 © 2017 IBM Corporation Introducing Moe… Designing withColor| IBMAccessibility Moe Kraft
- 4. © Copyright IBM Corporation 2017 Icebreaker, Color and Feelings •How are you feeling today? •Pick a color that most identifies with your feeling? © 2017 IBM Corporation
- 5. © Copyright IBM Corporation 2017 Color, a powerful force in our lives “Colors, like features, follow the changes of the emotions”
- 6. © Copyright IBM Corporation 2017 Meaning of color Users perceive color differently Although the meaning of color can differ across individuals and cultures, some emotive qualities have been commonly linked to certain colors. For example, blues and greens bring to mind the coolness of water; fiery reds and oranges add warmth to a design. 6
- 7. What is color? Science of how we perceive color © 2017 IBM Corporation 7
- 8. © Copyright IBM Corporation 2017 Color is perception Color is the perception or sensation we have to light reflecting off objects.
- 9. © Copyright IBM Corporation 2017 Dispersion White light is dispersed as it passes through a prism into different colored light of varying wavelengths. 9
- 10. © Copyright IBM Corporation 2017 Absorption & Subtraction 10
- 11. Color Perception Let’s have some fun. © 2017 IBM Corporation 11
- 12. © Copyright IBM Corporation 2017 Gray checkerboard •Which square is lighter, A or B? Yellow-blue dogs 12
- 13. © Copyright IBM Corporation 2017 Color is impacted by: •Emotion •Context •Illumination •Biology 13
- 14. © Copyright IBM Corporation 2017 Retinal cones • Note: Red, Green and Blue cone cells 14
- 15. Choosing good color Understanding these variances how do we choose good color for our content? © 2017 IBM Corporation 15
- 16. © Copyright IBM Corporation 2017 How do you choose good colors? “The most important factor in readability is the luminosity contrast between the foreground text and its background, “hue and saturation per se are irrelevant” – Lighthouse Hanbook, Silverstone, et. al. 16
- 17. © Copyright IBM Corporation 2017 Color Contrast •Color contrast enables users with moderately low vision or color-blindness to read text without contrast enhancing technology. •It is also good design!
- 18. © Copyright IBM Corporation 2017 What is the Minimum Contrast requirement? 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA). [ISO-9241-3] requires a minimum contrast of 3:1. The 4.5:1 ratio accounts for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging. 18
- 19. © Copyright IBM Corporation 2017 A tip from IBM Design Full-Spectrum Color Palette Blue background has a grade of 70 minus 20 grade for Purple text ----------------------------------- = 50 grade Grade 50 or greater is accessible! 19
- 20. © Copyright IBM Corporation 2017 Complimentary color test 20
- 21. © Copyright IBM Corporation 2017 How to test for contrast 21
- 22. © Copyright IBM Corporation 2017 Color Contrast Activity • Choose two complementary colors • Using Color Contrast iOS App from User Light determine contrast ratio. 22
- 23. Considerations when using color 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A) © 2017 IBM Corporation 23
- 24. © Copyright IBM Corporation 2017 Information conveyed through Color 24
- 25. © Copyright IBM Corporation 2017 Which color scheme works for you? How about for someone with light sensitivity? 25
- 26. © Copyright IBM Corporation 2017 References • Gouras, Peter. "Color Vision by Peter Gouras." Webvision: Color Vision. University of Utah, 1 July 2009. • Wright, Angela. "Psychological Properties Of Colours - Colour Affects." Psychological Properties Of Colours - Colour Affects. N.p., n.d. Web. © 2008-16 Angela Wright. All Rights Reserved. • Silverstone, Barbara. The Lighthouse Handbook on Vision Impairment and Vision Rehabilitation. Mary Ann Lang, Bruce Rosenthal, Eleanor E. Faye. Oxford: Oxford UP, 2000. Print. • Morton, Jill. "Basic Color Theory." Color Matters. N.p., n.d. Web. Graphics and Text: Copyright (c) 1995-2017, J.L.Morton, All rights reserved. • “The Science of Color,” Smithsonian Libraries. • “Red-Green Color Blindness,” Copyright (c) 2006-2016, Colblindor. • “Checker Shadow Illusion,” 2016 Wikipedia.org. • “Color Illusions,” 2012, BrainDen. 26
- 27. © Copyright IBM Corporation 2017 Resources • “Designing with Color; a Collaborative Curiosity,” Pandhi, Charu and Kraft, Maureen, ©2016 IBM Corporation. • “Color,” IBM Design Language, © IBM Corporation. • “Colour Contrast Analyser,” © The Paciello Group. All rights reserved. • Web Content Accessibility Guidelines 2.0, Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang). • “Use of Color: Understanding SC 1.4.1,” Understanding Success Criterion 1.4.1. N.p., 17 Mar. 2016. • “Contrast (Minimum):Understanding SC 1.4.3.” Understanding Success Criterion 1.4.3. N.p., 17 Mar. 2016. 27
- 28. © Copyright IBM Corporation 2017 Thank you! Charu Pandhi, cpandhi@us.ibm.com Moe Kraft, maureen_kraft@us.ibm.com @IBMAccess IBM Accessibility Ageandability.com
Editor's Notes
- This presentation, Designing with Color, uses speaker notes. To read the speaker notes using JAWS, use shortcut key combination: Ctrl + Shift + N To read the speaker notes using the NVDA screen reader, use the shortcut key combination: Ctrl + Shift + S
- Charu Pandhi is an Advisory Software Engineer in IBM Accessibility, part of IBM's Research Division. Charu has been leading the cognitive, age and ability effort for over a decade, enabling product teams across all IBM to integrate accessibility through innovation, automation, and consulting services essential for IBM.
- As Transformation Lead for IBM Accessibility, Moe Kraft drives open source strategy to promote IBM Accessibility thought leadership and technical eminence while continuing to integrate accessibility into the offering life cycle.
- How are you feeling today? Do you feel anxious? Is the color green soothing to your eyes? Does the color blue make you feel calm? Colors make us feel different things. Blue is calming and can also invoke cold. Red is often attributed to warmth or stress. Red can also relate to beauty as in rose. Shown on this slide is Plutchik’s wheel of emotions. Plutchik uses the wheel to diagram 8 basic emotions, Joy, Trust, Fear, Surprise, Sadness, Disgust, Anger and Anticipation. As one moves out from the center of the wheel the colors become less intense to demonstrate milder forms of the emotions. http://whatis.techtarget.com/definition/Plutchiks-Wheel-of-Emotions
- Like our expression that reflect our emotions, an artist’s work reflects his or her feelings in the colors they use. For example when in a peaceful mood one may use blues and greens that are calming where as one may use bold and bright hues when excited or in love. Picasso stated, “Colors, like features, follow the changes of emotions.” Similar to how we may smile when we are happy or frown when we are sad, different colors can be used to express these different feelings. Sunshine acquired through pixabay.com under Creative Commons license: https://pixabay.com/nl/zon-gelukkig-zonneschijn-gouden-47083/ and https://pixabay.com/nl/service/terms/#usage
- Lets us explore further the psychology of color and the science behind it. The IBM Design Language provides a section on the Meaning of color. Included in this section is a color wheel. Selecting one of eight colors on the wheel, presents the colloquial or cultural meaning of the selected color. For example, if you select Yellow you will find that yellow is most associated with happiness and positivity and that yellow can promote creativity and activity. A little bit of yellow goes a long way, and too much can create a feeling of anxiety. Due to its energetic nature, yellow can seem unstable. Culturally, yellow tends to take on many meanings including courage and commerce. The Color section of the IBM Design Language can be found at the following address: https://www.ibm.com/design/language/experience/visual/color/
- Let’s take a closer look at the science of color and why it is important. Color allows us to perceive objects and how they relate to each other. Without color or contrasts in color, objects can appear camouflaged and difficult to discern.
- Without light, there is no color. Image on this slide purchased through Shutterstock.com, image vector id: 514067857 under Standard Image License. Do not redistribute.
- Through his experiments using prisms, Sir Isaac Newton showed us that white light could be dispersed into a visible color spectrum of varying wave lengths. He identified 7 basic colors, red, orange, yellow, green, blue, indigo and violet. On this slide we have a prism that shows red has the longest wavelength in the visible color spectrum while violet has the shortest. Image purchased through Shutterstock.com, image id 400076566 under standard license. Do not reuse or redistribute.
- When light reflects off objects, some colors are absorbed by the object while others reflected. In this example we see green light being absorbed by an object while the colors red and blue are reflecting mixing to make magenta or purple. It is the purple light that we perceive by subtracting the green.
- Ask for volunteers. Which blue is darker. Holding two pieces of card stock, one of light blue and one of dark blue with blue squares centered in the middle, see if the audience can determine what is different about each square. The squares look darker on the light background and lighter on the dark background when in reality they are the same color.
- In this optical illusion, we are demonstrating how our brains perceive two squares, A and B, on a checkerboard as being different shades of gray based on our knowledge of the pattern they are following, alternating light and dark squares, and the fact that the green cylinder is casting a shadow onto the checkboard. In reality, both A and B squares are the same color. Testing with the Paciello Group’s Colour Contrast Analyser shows both squares having the same hex color value of #787877. Checkerboard images provided under Creative Commons license: https://commons.wikimedia.org/wiki/File:Grey_square_optical_illusion.svg and https://en.wikipedia.org/wiki/Checker_shadow_illusion#/media/File:Grey_square_optical_illusion_proof2.svg
- So we have seen how color is impacted by emotions, context and illumination. Let’s take a closer look at how color is impacted by biology or physiology.
- In our retinas we have cone cells that are sensitive to the differing wavelengths of visible light. Some cone cells are sensitive to the longer wavelengths of red light, some are more sensitive to the medium wavelength of green light and some to the shorter wavelengths of blue light. For people with color blindness or color deficiency, most of whom suffer from red-green color blindness, we find either a mutation or a lack of these cone cells. Image of photoreceptor cell purchased through Shutterstock.com under standard license. Stock illustration ID: 138348818. Do not reuse or redistribute.
- Let’s now take a closer look at how we can make good color choices in our design.
- How do you choose good colors to enhance the human experience? In the Lighthouse Handbook on Vision Impairment and Vision Rehabilitation, Barbara Silverstone, Mary Ann Lang, Bruce Rosenthal and Eleanor E. Faye cite two studies (Knoblauch, Arditi, Szlyk, 1991 and Legge, Parish, et al. 1990) that stress “the most important factor in readability is the luminosity contrast between the foreground text and its background, ‘hue and saturation per se are irrelevant’.” Also called the luminosity factor. In Optics, the definition of luminosity reads “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.” – Dictionary.com Basically what we are saying is that the most important thing in readability is the contrast of the foreground color with its background. Hue, or the shade of a font color, and saturation, the intensity of the font color are not as important as the contrast with its background.
- Any technology or print that produces visual output – web, documentation or print – must provide enough contrast between text and background colors. Why is this important? The IBM Design Language tells us that “Contrast distinguishes words and images through a perceived difference in color. It separates elements and groupings in a layout and plays a crucial role in accommodating all types of users” such as users with moderately low vision, users with congenital, acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging. Good contrast enables these users to read the text without contrast enhancing technology. The WCAG 2.0 standards require it, It is also good design.
- The Web Content Accessibility Guidelines 2.0 (WCAG 2.0) define minimum contrast requirements in Success Criteria 1.4.3 [v]. The success criteria uses the Knoblauch et al. study findings on text readability using luminosity as the key factor in determining proper contrast between the foreground text and its background. Notes on formula Conversion from nonlinear to linear RGB values is based on IEC/4WD 61966-2-1 [IEC-4WD] and on "A Standard Default Color Space for the Internet - sRGB" [sRGB]. The formula (L1/L2) for contrast is based on [ISO-9241-3] and [ANSI-HFES-100-1988] standards. But don’t freak out. There are tools that help us determine if we meet minimum contrast requirements of 4.5 to 1 for text or 3 to 1 for large text. Only if you are a tool developer do you need to worry about the formula.
- The IBM Design Language offers a simpler approach to ensuring sufficient contrast in the IBM Design Full-Spectrum color palette. The color palette contains ten grades, from 10 to 100. Black text is WCAG 2.0 AA accessible on grades ranging from 10 to 50. White text is accessible on grades from 50 to 100. Beyond black and white text, IBM colors provide a range of accessible combinations. Subtracting the foreground color grade from the background color grade (or vice versa), helps you determine whether that color combination meets the WCAG AA contrast ratio success criterion. If the difference between two grades is above 50, the colors are accessible. Anything below a difference of 50 fails accessibility standards. https://www.ibm.com/design/language/experience/visual/color/
- Complementary colors, colors which sit exactly opposite each other on the color wheel, may provide some help when choosing colors of good contrast. In her article on Basic Color Theory, Jill Morton suggests “These opposing colors create maximum contrast and maximum stability” For instance, on a tertiary color wheel, purple is directly across from light green. Analyzing the contrast between these two colors using a Color Contrast Analyzer shows that they provide a contrast ratio of 4.8 to 1 which is sufficient contrast for all font sizes. Morton, Jill. “Basic Color Theory.” Color Matters. N.p., n.d. Web. Graphics and Text: Copyright (c) 1995-2016, J.L. Morton, All rights reserved.
- So how do you know that you have good contrast? No fret. There are tools, such as the Colour Contrast Analyser from the Paciello Group, which help ensure your foreground and background colors have sufficient contrast to meet the WCAG 2.0 requirements. The image on the slide from the IBM Accessibility website demonstrates good contrast with different foreground texts, such as white and dark yellow on a black background, that provides minimum contrast for all font sizes.
- Ok, let’s give it a try. We have card stock of varying light and dark colors. Select two colors from the card stock and test for color contrast. Our colleagues have download the Color Contrast iOS App from User Light. Selecting each color in the application allows us to determine if the two colors meet the WCAG 2.0 AA Contrast Minimum Requirements.
- Ok, so let’s discuss when we would use color and what considerations we should take when doing so.
- Equally important, is to ensure that color is not used as the only means to convey information. Users who are colorblind or depend upon different color schemes, such as a high contrast theme, may not detect the differences in colors used and may fail to understand the information that is being conveyed. This is why it is important to also have a physical shape change in any icons that are communicating a status change, have additional styling or have a text alternative to further convey the information. Having a color change alone can be a cognitive load on users as they try and understand the meaning behind the change in color. The example on the slide demonstrates a form which uses styling to add an asterisk (*) to the required field labels in addition to using a red font. The first picture of the form uses red styling in addition to the asterisk. The second photo shows the same form under Protanopic simulation. The red turns almost black. This is how a person with red-green color blindness sees the form. Without the asterisk they would not be able to detect the required fields.
- On this slide we have the same screen under standard contrast with a white background ground and dark gray fonts. The second screen shot shows the same user interface with a black background and yellow fonts. For someone with light sensitivity high contrast, or the black background is essential. And remember in high contrast we only have a limited number of colors usually around 3 or 4. So it important to test your user interface in high contrast to ensure you have not lost any meaning due to loss of color.
- This slide contains links to the references cited in this presentation.
- This slide contains links to the resources used in this presentation.