Tips for making color more accessible
Part 1 of this series provides information about the physiology of color blindness, and lists examples of situations that are challenging for color-blind people.
Part 2 provides tips to prevent color design oversights and help reduce accessibility barriers for color blind people.
- Choose colors that all color vision types can identify easily. In the design process, determine which hues and shade combinations are problematic in terms of their perception or differentiation, and avoid them. Refer to the available Web resources to help determine a color palette that is suitable for different types of color blindness, and to proof your color palette. Usually, if you increase the contrast between the brightness of colors, even when their hue and saturation are different, they can be discerned more easily. Note: See the resource list at the end of this article.
- Ensure that color is not the only differentiating cue. When designing for a Web site or the interface of a software application, use explicit text labels, shapes, line borders, or textures. Ensure that there is sufficient contrast between the text label and colors. Black text on a white background is prevalent because it provides good contrast for differentiation.
Shapes and text labels help with the differentiation of items.
- Explicitly identify a color whenever its identification is useful and could be misinterpreted. For example, to ensure that a color can be accurately identified, regardless of the context:
- Add the color name to a bar code tag for an item of clothing.
- Ensure that a crayon contains the color on its label, and imprint the color name in the crayon wax in case the label is torn off.
- Print the color of the plastic insulating covering of a wire every few inches along its length.
- Use a tooltip to identify the color by name (or its RGB value).
- Add a color blind test to your regular set of accessibility checks for your product. Test the colors that play a critical role in any aspect of the design of your product. Consider involving one or more color blind testers, each with a different type of color blindness. In the early design process and during usability evaluations, ensure that your colors are distinguishable for their intended purpose in various planned contexts. The solution is often not as simple as substituting a color when a confusing color is critical to the color palette of a design. Sometimes it is necessary to evaluate various color palette options. For software application and Web site designs, a number of utilities are available to help proofing how colors in the design appear to a person with color blindness. These utilities help to ensure that important colors are readily differentiated, and you can tweak any colors at issue. Minor color adjustments can make a huge difference in color perception for a color blind person. Note: See the resource list at the end of this article.
- Allow customization of the colors of user interface elements. Many software applications provide preferences for customizing the colors of various UI components, such as text, background color, and highlight color. This option provides the most flexibility for a color blind person. A few Web sites also provide the capability to change between a limited set of predefined color palettes to display their UI elements.
A poorly designed user interaction can unintentionally impede an otherwise efficient workflow. Likewise, the wrong color choice for elements of a design that you want users to distinguish greatly impedes accessibility for a color blind person. Make a difference for color blind people by considering these tips for your projects.
References
- Adobe Creative Suite – Proofing Colors – Soft-proof for color blindness (Adobe Photoshop and Illustrator)
- Designing for Color Blindness and Color Universal Design (CUD) – The Distinct Studios Journal.
- Color Universal Design – Web site for the Color Universal Design Organization (mostly Japanese, but this link provides an overview in English).
- Can Color-Blind Users See Your Site? An article by Robert Hess for the Microsoft Development Network (MSDN), October 2000.
- Color Oracle – A free color blindness simulator for Windows, Mac, and Linux.
- Vischeck – A Web site that provides resources for simulating color-blind vision.
- Visolve – A utility that transforms colors into discernible colors for the color vision deficient.
- Designing for People with Partial Sight and Color Deficiencies Aries Arditi, PhD. Guidelines for making effective color choices that work for nearly everyone.