1.3 L1 SC3: Any information conveyed through color can be programmatically determined. For example, through markup or unique characters that accompany the color coding.

Using color to convey information

This technique relates to the following sections of the guidelines:


When color is used to convey information, the same information should be available in a form that does not depend on the ability to perceive color.

Color is an important asset in Web design, enhancing usability and aesthetic appeal. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only and monochrome displays will be unable to access information that is presented only in color. The solution is to include the information in the source document while setting presentation properties in a style sheet.

  • Example 1. A form has both required and optional fields. Required items are marked with an asterisk and shown in red. The asterisk is included in the label text and the color is specified in the style sheet.

  • Example 2. An examination. Students view an SVG image of a chemical compound and identify the chemical elements present based on the colors used in the diagram. The text alternatives associated with each element name the color of the element and indicate the element's position in the diagram. Students who cannot perceive color have the same information about the compound as their classmates. (This technique also satisfies Guideline 1.1 Level 1.)


CSS Techniques