VGAR Visual Requirements
Requirements
Visual
Not Only Color (VIS-WEB-002)
Don't use color to convey information unless you use another method as well
Color is not perceived equally by all users so depending on color to communicate information is not a reliable way to ensure user understanding. For instance, if a line graph shows two lines comparing two sets of data and one is blue and the other is purple, a colorblind user might not see a difference in these colors. Without knowing the difference in these colors, the user will not understand the data comparison being displayed.
To improve this data display, the design should also include text labels for each line that clearly communicate the identity of each line.
Requirements
Not Only Color (VIS-WEB-002-01)
If a color difference is used to convey information, that information MUST also be available in text or through some other alternative method.
Test Procedures
Visual Inspection (VIS-WEB-002-01-T)
Confirm that whenever a difference in color is used to convey information, that information is also be available in text or through some other alternative method.
Related Content
WCAG Success Criteria
W3C Techniques
- G14: Ensuring that information conveyed by color differences is also available in text
- G205: Including a text cue for colored form control labels
- G182: Ensuring that additional visual cues are available when text color differences are used to convey information
- G183: Using a contrast ration of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
- G111: Using color and pattern
- G14: Ensuring that information conveyed by color differences is also available in text
- C15: Using CSS to change the presentation of a user interface component when it receives focus
Common Failures
- F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
- F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
- F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only
These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information. You should not act or rely on such content without seeking the advice of a professional. All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.