Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
What it means
The intent of this success criterion is to ensure that all sighted users can access information that is conveyed by color differences, that is, by the use of color where each color has a meaning assigned to it. If the information is conveyed through color differences in an image (or other non-text format), the color may not be seen by users with color deficiencies. In this case, providing the information conveyed with color through another visual means ensures users who cannot see color can still perceive the information. Color is an important asset in the design of web content, enhancing its aesthetic appeal, its usability, and its accessibility. 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 limited-color or monochrome displays and browsers will be unable to access information that is presented only in color. Examples of information conveyed by color differences: “required fields are red", “error is shown in red", and “Mary's sales are in red, Tom's are in blue". Examples of indications of an action include: using color to indicate that a link will open in a new window or that a database entry has been updated successfully. An example of prompting a response would be: using highlighting on form fields to indicate that a required field had been left blank. This should not in any way discourage the use of color on a page, or even color coding if it is complemented by other visual indication.
Failing example
<!-- Fails: required field indicated only by red border -->
<style>
input.required { border-color: red; }
</style>
<input class="required" type="text" name="email">How to fix it
<!-- Pass: required field uses color AND text/icon -->
<label for="email">
Email <span aria-hidden="true">*</span>
<span class="sr-only">(required)</span>
</label>
<input id="email" type="email" name="email"
aria-required="true" class="required">How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →