Road Tip: Color and Contrast in E-mails
Accessibility is not a check-off item or a standard of perfection. It is an intention, adopted by each of us, to make some progress toward fully accessible content every day. ROAD Tips help each of us start small by making one change. In a couple of weeks, we will ask you to make another small change. Each small change is progress toward the goal of fully accessible content.
More than 20.6 million Americans have some form of visual impairment, according to the National Center for Health Statistics (Facts and Figures on Adults with Vision Loss, accessed at http://goo.gl/0nLZSN). That number will double by 2030. In addition, low quality computer monitors, bad lighting and glare, and the use of tiny screen devices affect the readability of e-mail messages. What you see may not be what your reader sees. If your reader cannot easily see your e-mail, your message may be lost.
Fortunately, most e-mail readability issues are easily fixed. Following these rules of e-mail design will increase the accessibility of your e-mails for all readers.
Two Steps to Increase the Readability of Your Message Today
- Do not rely on color alone to convey meaning
- Individuals with low vision are often unable to distinguish certain colors. Because of this, the use of just text color to convey meaning (emphasis, a link, or to direct attention in an image or graphic) should be avoided.
- Avoid background colors that decrease contrast
- High contrast increases legibility. The preferred contrast for e-mails is black type on a white background. If a background color is used, avoid dark backgrounds and light type. As a rule, light backgrounds with dark type are easier to read. An easy way to check for accessible color contrast is to use WebAIM Color Contrast Checker (accessed at http://goo.gl/bWVhBG).
For further information on the role of color and contrast in creating accessible e-mails, visit the Accessibility website of the LSC ROAD project or e-mail us at ROAD@lsc.edu.
- WebAIM Color Contrast Checker allows the user to test color codes to comply with the contrast ratio required by the WCAG 2.0 AA standards.
- WebAIM Visual Disabilities
- WebAIM Fonts
O’Connor, Cathy, “Design Accessibly, See Differently: Color Contrast Tips And Tools,” Smashing Magazine, October 22, 2014
Chromatic Vision Simulator
This smartphone application simulates three forms of color deficiencies: protanope (protanopia – a reduced sensitivity to red light), deuteranope (deuteranopia – a reduced sensitivity to green light) and tritanope (tritanopia – a reduced sensitivity to blue light). Simulations can be viewed and saved using the camera feature, which takes a screenshot in the application.
This smartphone application from the Braille Institute allows the user to simulate nine types of degenerative low-vision conditions. The application also provides the symptoms, causes, and treatments for each condition. Simulations can be viewed and saved using the camera feature, which takes a screenshot in the application.
Note: The Braille Institute includes a link to an Android version of this application, but the link is broken.
NoCoffee Vision Simulator for Chrome
This plug-in for the Chrome browser allows the user to test web content for usability issues caused by low visual acuity, low contrast sensitivity, color-blindness, ghosting, and obstructed visual fields.
The Paciello Group’s Colour Contrast Checker
The Paciello Group’s Colour Contrast Checker provides tools that permit the user to conduct a pass/fail color contrast assessment and to simulate the appearance of web content to a person with less than 20/20 vision.