Color alone is used to identify error(s)

Link to Color alone is used to identify error(s) copied to clipboard

form-errors-color-only

Rule

Any information conveyed by color MUST be accompanied by a programmatically-discernible text alternative.

Any information conveyed by color MUST be accompanied by a visible alternative (text, image, etc.) that does not depend on color for meaning.

Background

When color alone is used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element, people who are blind, have low vision, or are color blind will not be able to access that information. It is perfectly acceptable to use color to convey information as long as it is redundant with another visual indication (such as real onscreen text, icon, pattern, or a contrast ratio between elements greater than 3 to 1) AND text that can be accessed by a screen reader (such as real onscreen text, screen reader accessible alternative text, or ARIA attributes). When information conveyed by color is also conveyed by redundant visual and screen reader accessible information, people who have visual disabilities will have access to that information.

How to Fix

Error identification must not rely on color alone, such as only outlining the field in red or changing the field label to red, to communicate the error.

Fix this issue by using ONE or BOTH of the following techniques:

  1. Provide a list of error messages that include the field name at the top of the page.
  2. Provide an inline form error message that includes the field name or is associated with the field or both.