Designing with Color; a Collaborative Curiosity

by Charu Pandhi (@charupandhi) and Moe Kraft (@moekraft), IBM Accessibility Research.

Color is the perception we have to light reflecting off objects. It provides important information about objects and how they relate to each other. Your perception of the object’s color depends upon the context and can radically differ depending on the exposure to light and the source of illumination, such as sunlight, fluorescent or blue light [i]. A classic example of an object’s color being perceived differently was witnessed in the dispute over whether the dress pictured was blue and black, or white and gold that went viral [ii].

Colors make us feel different things. Blue is calming and can also invoke cold. Red is often attributed to warmth or stress[iii]. Red can also relate to beauty as in rose.

How then do you choose good colors to enhance the human experience?

Plutchik's Wheel of Emotions relating color depth to intensity of emotion. For example, deep yellow centered in the wheel relates to ectasy while light yellow on the outside of the wheel relates to serenity.from By Machine Elf 1735 (Own work) [Public domain], via Wikimedia Commons

Plutchik’s Wheel of Emotions

Any technology that produces visual output – web, documentation or print – must provide enough contrast between text and background colors. Why is this important?  Color contrast enables users with moderately low vision, with congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging, to read the text without contrast enhancing technology. It is also good design.

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 between the foreground text and its background, “hue and saturation per se are irrelevant.[iv]

The Web Content Accessibility Guidelines 2.0 (WCAG 2.0) define minimum contrast requirements in Success Criteria 1.4.3 [v]. The success criteria use 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.

The visual presentation of text (and images of text) has a contrast ratio of at least 4.5:1, except for large print and images of large print, which must have a contrast ratio of 3:1. Decorative images and logotypes are exempt from this requirement.

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 below 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.

A screenshot from the IBM Accessibility website demonstrates good contrast as verified by Colour Contrast Analyser.

An image from IBM Accessibility’s website demonstrates good contrast as verified by Colour Contrast Analyser.

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.[vi]” For instance, on a tertiary color wheel, purple is directly across from light green. Analyzing the contrast between these two colors using the Colour Contrast Analyser shows that they provide a contrast ratio of 4.8 to 1 which is sufficient contrast for all font sizes.

Screen shot of the Colour Contrast Analyser showing how light green and purple provide sufficient contrast.

Color Contrast Analysis of Light green and Purple shows good contrast.

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 following  screen shot demonstrates a form which uses styling to add an asterisk (*) to the required field labels in addition to using a red font.

Form with required fields,First name, Last name and email in red and indicated with an asterisk.

Form with required fields,First name, Last name and email in red and indicated with an asterisk.

Form with required fields in red font plus asterisk.

When the same form is simulated for Protanopic (red compromised) color blindness, the red is lost and the font of the required fields looks very much like the black font color of the non-required fields.

Protanopic simulation of form with required fields showing loss of red font color.

Protanopic simulation of form with required fields showing loss of red font color.

Using a collaborative curiosity in exploring effects of color; empathizing with your user, understanding how color is perceived and that there is so much more to contrast then just light and dark; and, using color to its full potential will lift your content to the next level – inclusive by design. Using color appropriately can enhance the human experience for your users and ensure that your application, documentation or web site can be accessed by the widest possible audience.

If you would like to see a Designing with Color Workshop at South by Southwest (SXSW), please register with the SXSW Panel Picker app to vote.  Thanks, Charu & Moe.

[i] “Color Vision by Peter Gouras,” Webvision: Color Vision. University of Utah, 1 July 2009.

[ii] “The Science of Why No One Agrees on the Color of This Dress,” Wired.com. Conde Nast Digital, 26 Feb. 2015.

[iii] “Psychological Properties of Colours,” © 2008-16 Angela Wright. All Rights Reserved.

[iv] Lighthouse Handbook on Visual Impairment and Visual Rehabilitation, Silverstone, et al, 2000.

[v] Contrast Minimum: Understanding Success Criteria 1.4.3, © 2013 Copyright W3C®.

[vi] “Basic Color Theory,” Color Matters, J. L. Morton. © 1995-2016.

References

  1. Gouras, Peter. “Color Vision by Peter Gouras.” Webvision: Color Vision. University of Utah, 1 July 2009.
  2. Rogers, Adam. “The Science of Why No One Agrees on the Color of This Dress.” Wired.com. Conde Nast Digital, 26 Feb. 2015.
  3. 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.
  4. Silverstone, Barbara. The Lighthouse Handbook on Vision Impairment and Vision Rehabilitation. Vision Rehabilitation. Mary Ann Lang, Bruce Rosenthal, Eleanor E. Faye. Oxford: Oxford UP, 2000. Print.
  5. Contrast (Minimum):Understanding SC 1.4.3.Understanding Success Criterion 1.4.3. N.p., 17 Mar. 2016. Web. Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang).
  6. Colour Contrast Analyser (CCA).” The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 Audits, VPAT, Usability and Accessible User Experience). N.p., n.d. Web.
  7. 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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *