Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A).
Description
Similar to Sensory Characteristics, using color solely for providing some information, instruction or distinguishing a visual element will also cause problems for persons with visual difficulties. People with visual challenges especially those with color blindness will not be able to identify the difference in colors and end up in losing the information conveyed. For example, to identify a hyperlink from the surrounding content on the web page, in addition to differentiating with color some other visual means such as underline should be provided.
Not only people with color deficiencies, but also for those who cannot read the content on the web pages will not be able to perceive the instruction or information conveyed with the use of color only. Assistive technologies such as refreshable Braille displays and screen readers will not provide the color information. If an instruction says “All the fields marked with red are mandatory†or simply the mandatory fields are marked with red, users of these assistive technologies face difficulty in identifying the mandatory fields. So in addition to the color, use an icon with alternate text “Required†or provide “*†symbol with the instruction “Fields marked with * are mandatory.
In addition to the above groups, Older people will have difficulty in differentiating colors, people who use monochrome devices, text only browsers also will not be able to perceive the information conveyed using colors.
In the process of providing the accessible information, use of color should not be compromised but additional means needs to be provided for the users to perceive the information.
Few more Examples
Example 1
Fields are marked in red to say that they are mandatory.(wrong)
Provide additional way such as icon with alternate text required, * (star) symbol with instruction fields marked with * are mandatory (correct).
Example 2
Dimmed color for buttons to show they are inactive or disabled (wrong).
Provide additional way for prompting that the button is disabled such as use of aria-disabled=”true” attribute (correct).
Example 3
Fill all the fields and click the green button to continue (wrong).
Fill all the fields and click the green button labeled “Continue†to proceed to next step (correct.
Example 4
Links and surrounding conntent is differentiated only with color (wrong)
Links within content is differentiated using at least one visual queues such as underline, change in font style, increase in font-size (correct)