Information conveyed with color must also be identifiable from context or mark-up

Color coding may not be used as the only means of conveying information. This includes indicating an action, indicating a state, prompting a response, or distinguishing a visual element. An application that requires a user to distinguish the importance of red versus black text for different functions (e.g. error messages versus simple status messages) poses problems for anyone with vision disabilities. When colors are used as the sole method for identifying screen elements, controls, or giving instructions, persons who are blind, color blind, or have low vision may find the web page unusable. Screen reader users are also unable to perceive color.

This provision does not prohibit the use of color to enhance the identification of important features. It does, however, require that some other method of identification, such as on-screen text, be combined with the use of color.

Users with lower end handsets with poor support for colors may also have trouble distinguishing colors as might users who use alternative color settings at the OS level. 

Color used to convey selected tabs, links, error messages, emphasis, and other meaningful information must also have an alternative method of communicating the information.

Use visual clues, text attributes, and icons (with accompanying alternative text) to reinforce meaning. Alternatives to color must be visually present and also programmatically available to assistive technologies.

iOS

Use visual clues and icons with text equivalents to reinforce meaning.

iOS Example

// First Name field is required as denoted by BOLD RED Text but also with
the word required in the accessible label
[FNLabel setText:NSLocalizedString(@"First Name", nil)];
[FNLabel setTextColor:[UIColor redColor]];
[FNLabel setFont:[UIFont boldSystemFontOfSize:FNLabel.font.pointSize]];
[FNLabel setAccessibilityLabel:[FNLabel.text
stringByAppendingString:@" (Required)"]];
[FNField setAccessibilityLabel:FNLabel.accessibilityLabel];

Example 2:
The individual series within a line chart contain different shapes to
differentiate them from other series.  Bar charts use hatching and various
patterns in addition to color.
and
Provides an accessible label for use by assistive technologies.

iOS Failure

// First Name field is required as denoted by RED Text
[FNLabel setText:NSLocalizedString(@"First Name", nil)];
[FNLabel setTextColor:[UIColor redColor]];

Example2:
Line charts and bar charts are used with different colors differentiating
the series when plotted together. 

Android

Use visual clues and icons with text equivalents to reinforce meaning. Use the android:contentDescription property to provide short and concise alternatives. The exception is on EditText fields; these must be coded using the android:hint attribute. This helps users understand what content is expected when the text field is empty. When the field is filled, TalkBack reads the entered content to the user, instead of the hint text.

Android Example

//On-screen text followed by text input, the accessible label (and
on-screen label) for the text input indicates that it is required 
<TextView android:id="@+id/password_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" 
android:textColor(Color.parseColor("#FF0000"));
android:text="Password (required)"></TextView>
<EditText android:id="@+id/password"
android:inputType="textPassword"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:contentDescription="Password
(required)"></EditText>

Android Failure

//On-screen text followed by text input, the accessible and on-screen label
for the text input do not indicate required
<TextView android:id="@+id/password_label"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" 
android:textColor(Color.parseColor("#FF0000"));
android:text="Password (required)"></TextView>

<EditText android:id="@+id/password"
android:inputType="textPassword"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:contentDescription="Password"></EditText>

HTML

If color is used to convey meaning ensure accessible alternatives are provided. This could be underlined text for links, visible text on buttons, alt text labels and so on.

HTML Example

<h3 style="color:red">Required fields are indicated in red
and with an asterisk</h3>
<label style="color:red;"
for="i1">*Id:</label>
<input type="text" id ="i1" />

HTML Failure

<h3 style="color:red">Required fields are indicated in
red</h3>
<label style="color:red;"
for="i1">Id:</label>
<input type="text" id ="i1" />

Remediating

Ensure that all information communicated with color is communicated textually. For error messages, this can be accomplished by adding descriptive words such as "Error:" to the beginning of the message in question. For status buttons, developers should provide a text description by assigning an accessibleLabel. Descriptions should be short, concise, and consistent to build the level of usability within the application.

For content that uses color to convey meaning, this meaning must be distinguishable both to users of assistive technology such as screen readers who may not be able to see the screen at all, as well as to users who may be color blind but do not use any assistive technology. For example, techniques such as bolding assist users who are color blind but can not be easily detected by users of screen readers. Similarly, techniques such as an accessible label can be detected by screen readers but can not be accessed by users who are color blind who do not use assistive technology.

Ensure that the different series, lines, and bars in a graph or chart are distinguishable by containing unique shapes, patterns, and marking of various elements. Ensure the image contains pictures or text in addition to color and ensure the image has a proper textual alternative via the accessible label. When meaning may not be clear, developers should ensure that a key or legend is used to indicate what each style means.

Testing

Recommended tool/method: Visual Inspection / Screen Reader

1. Activate the app with a screen reader
2. Navigate through the user interface
3. Locate objects, images, or elements that use color
4. Determine if color is used to convey meaning
5. Verify that there is an alternative visual means of getting the same information that is in the color
6. Verify that the screen reader announces the meaning conveyed by the color
7. Verify that another method is used such as
   • On-screen text
   • On-screen symbols with accompanying labels
   • Accessible labels announced by the screen reader