About CIA

 

Section 5. Color and Contrast

Accessibility Score Sheet Questions

5.1    Is true text used, instead of images, whenever possible?

5.2    Do the default text and background size and colors provide sufficient contrast?

5.3    Is an additional visual indicator provided when information or instructions are conveyed by color?

5.4    Does the application support a variety of text and background size and color combinations via application preferences, MS Ease of Access Center, or browser settings?

Rationale

In order to fully support low vision and color blind users, applications need to work with user-selected display attributes, provide sufficient contrast options in the application, and avoid conveying information by color.

Many people experience a high degree of sensitivity to bright displays. People with this condition cannot focus on a bright screen for long because they will soon be unable to distinguish individual letters. An overly bright background can causes a visual “white-out.” To alleviate this problem, the user must be able to select a softer background and appropriate foreground colors. On the other hand, many people with low vision can work most efficiently when the screen is set with very sharp contrast settings. Because there is such a variance in individual needs, it is necessary for a program to support a variety of color and contrast settings.

Applications should provide a high contrast default option and then design to support a variety of color choices for text and backgrounds and allow for different levels of contrast. Often, individuals with disabilities can increase their efficiency with a system by selecting colors, contrast, and font sizes using the operating system or with personalized style sheets. Applications should test to make sure their application works well with each of these settings. Applications can also support different color combinations and text sizes within their application.

When colors are used as the sole method for identifying screen elements or controls, persons who are color blind as well as those who are blind or have low vision may find the web page unusable. Screen reading software can announce color changes. However, this is an “on/off” feature. This means that to identify a specific color, the screen reader would have to announce all of the colors, which takes a good deal of time. This section does not prohibit the use of color to enhance identification of important features. It does, however, require that some other method of identification, such as text labels, must be combined with the use of color. For example, a web page that directs a user to “press the green button to start” should also identify the green button in some other fashion than simply by color. One method is to include the text “start” on the button and to phrase the directions as “press the green start button.”

Test Approach

1. Evaluate the images on the page. Do any present text? If so, could true text be used instead of an image? Web applications: Use an accessibility toolbar to view text only or apply a high contrast style sheet or use another means to quickly identify images. Logos are a common example of an appropriate use of images with text because they contain a defining look and feel that sets the logo apart and cannot be achieved without an image. Large portions of body text should never be an image.

2. Web applications: Use the Accessibility Toolbar Color Contrast Report (under Styles) to examine the luminosity. Text smaller than 14 pt should have a luminosity of at least 4.5, ideally 7. Text 14 pt and higher should have a luminosity of at least 3, ideally at least 4.5.

Client applications: Use Color Contrast Analyzer to test contrast. Until then, use Color Oracle and print in black and white. Is any text difficult to read? Test questionable color combinations using WebAIM’s Color Contrast Checker.

3. Use Color Oracle to view page as if color blind. Print the pages in black and white on the printer. Is there any information you can’t understand when color is removed?

4. Users must be able to adjust their font size as well as text and background colors. Look through preferences to see if font size and color combinations can be adjusted within the application. If so, test to make sure text can be increased to 200% and ensure that there are at least three combinations that will provide a high contrast color scheme. Examples of high contrast color schemes are white on black, black on white, and yellow on blue.

Turn on the high contrast setting under Ease of Access Center, and check that your application works with these settings (note that browser applications may need to refresh to pick these settings up). Any color and contrast settings within applications should not override user selected display setting.

For browser applications, use the Accessibility Toolbar to view your site in High Contrast 1 and High Contrast 2. The Accessibility Toolbar, under Styles will also list color contrast ratios of all the text on your page. Test if content be read when Ctrl+ is used to zoom to ~200%. Test with seven increases (CTRL+) in FF and use the menu to specify 200% in IE. If the application works in FF, also test text only zoom (View>Zoom>Zoom Text Only) up to three increases (CTRL+).

Development Techniques

  • Do not override the user’s system contrast settings. Windows software can check for the high contrast setting by calling the SystemParametersInfo function with the SPI_GETHIGHCONTRAST value. Applications should query and support this value during initialization and when processing WM_COLORCHANGE messages. Call GetSysColors to identify the colors chosen through the Control Panel.
  • Do not override user-selected colors.
  • When color is used to convey information, use an additional visual indicator such as location, context, shape, text, style, outline, etc. to convey the same information.
  • Provide sufficient contrast in the default background and the text. Use a color scheme that ensure contrast is at least 3:1 for large text (14 pt or higher) and 4.5:1 for all other text. 4.5:1 for large text and 7:1 for all other text is preferable.
  • Consider turning off the background in response to the High Contrast setting.
  • Consider providing an option which enables users to turn off the background in the application. A simple menu selection, for example under a view, or options menu, might be a checkbox that lets the user check “use system display setting.”
  • Provide a brief text description of the object.
  • Include a graphic or character such as an asterisk by the item to denote importance.
  • When possible allow users to adjust or select from a variety of color, text boldness, and contrast settings. Allow the user to customize the appearance of the application by providing several color selections for background and foreground. Choose those selections with settings for a range of High Contrast selections in mind.
  • Avoid Reds and Greens together. For example, if Red lettering is used on a Green button; the colorblind user will not see the lettering and they will not know the purpose of the button. White on Black, and Black on White, Yellow on Black are high contrast settings. Also be aware of color choices when mixing dark shades of colors together.

Posted: Jan 07, 2016 12:41 PM
Last Updated: Jan 07, 2016 12:41 PM