28
© Copyright IBM Corporation 2017 IBM Accessibility Designing with Color, a collaborative curiosity! 3/14/2017
| Date post: | 21-Mar-2017 |
| Category: |
Design |
| Upload: | charu-pandhi |
| View: | 84 times |
| Download: | 0 times |
© Copyright IBM Corporation 2017
IBM AccessibilityDesigning with Color, a collaborative curiosity!3/14/2017
© Copyright IBM Corporation 2017
Introducing Charu…
Hello!
Designing with Color | IBM AccessibilityCharu Pandhi
2
© Copyright IBM Corporation 2017
© 2017 IBM Corporation
Introducing Moe…
Hello!
Designing with Color | IBM AccessibilityMoe Kraft
© Copyright IBM Corporation 2017
Icebreaker, Color and Feelings
• How are you feeling today?
• Pick a color that most identifies with your feeling?
4 © 2017 IBM Corporation
© Copyright IBM Corporation 2017
Color, a powerful force in our lives
5
“Colors, like features, follow the changes of the emotions”
© Copyright IBM Corporation 2017
Meaning of colorUsers 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
© Copyright IBM Corporation 2017
Color is perception
Color is the perception or sensation we have to light reflecting off objects.
8
© Copyright IBM Corporation 2017
Dispersion
White light is dispersed as it passes through a prism into different colored light of varying wavelengths.
9
© Copyright IBM Corporation 2017
Absorption & Subtraction
10
11
Color PerceptionLet’s have some fun.
© 2017 IBM Corporation
© Copyright IBM Corporation 2017
Gray checkerboard
• Which square is lighter, A or B?
Yellow-blue dogs12
© Copyright IBM Corporation 2017
Color is impacted
by:
• Emotion• Context• Illumination• Biology
13
© Copyright IBM Corporation 2017
Retinal cones
• Note: Red, Green and Blue cone cells
14
Choosing good colorUnderstanding these variances how do we choose good color for our content?
© 2017 IBM Corporation 15
© 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
© 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!
17
© 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
© 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
© Copyright IBM Corporation 2017
Complimentary color test
20
© Copyright IBM Corporation 2017
How to test for contrast
21
© Copyright IBM Corporation 2017
Color Contrast Activity
• Choose two complementary colors• Using Color Contrast iOS App from
User Light determine contrast ratio.
22
Considerations when using color1.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
© Copyright IBM Corporation 2017
Information conveyed through Color
24
© Copyright IBM Corporation 2017
Which color scheme works for you?
How about for someone with light sensitivity?
25
© 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
© 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
© Copyright IBM Corporation 2017
Thank you!
Charu Pandhi, [email protected] Kraft, [email protected]
@IBMAccess IBM Accessibility Ageandability.com
