Don’t Rely Solely on Color to Convey Information

Disabilities Affected: Visual

Success Criterion: 1.4.1

Level: A

This guideline states that color should not be the only way information is conveyed, an action is indicated, a response is prompted, or a visual element is distinguished.

Why It Matters

Users who are colorblind may not be able to perceive differences in color used to convey meaning (e.g., using red for errors and green for success). Users with low vision might also struggle to distinguish between certain colors. Relying solely on color excludes these users from understanding the information or interface cues.

Fixing the Issue

Ensure that information conveyed by color is also available through other means. This could include text labels, icons, patterns, underlining links, or using different shapes or indicators. For example, supplement color-coded error fields with an error icon and text message. Use more than just color to distinguish links within text (e.g., underline them).

Good Code Example

This form uses both color and text/icons to indicate required fields and errors:

Markup
Preview

<style>
  .required-label::after {
    content: '*'; /* Use an asterisk */
    color: red; /* Color is supplemental */
    margin-left: 2px;
  }
  .error-message {
    color: red; /* Color is supplemental */
    font-weight: bold;
  }
  .error-icon {
     /* Style for an error icon */
     display: inline-block;
     width: 1em;
     height: 1em;
     background-image: url('/wp-content/uploads/error-icon.svg'); /* Example */
     background-repeat: no-repeat;
     margin-right: 4px;
     vertical-align: middle;
  }
</style>

<label for="email" class="required-label">Email</label>
<input type="email" id="email" name="email" required aria-required="true">
<span class="error-message">
    <span class="error-icon" aria-hidden="true"></span>
    Please enter a valid email address.
</span>

Email Please enter a valid email address.

Bad Code Example

This example relies only on color to show required fields and errors:

Markup
Preview

<style>
  .required-label {
    color: red; /* Only color indicates requirement */
  }
  .error-text {
    color: red; /* Only color indicates error */
  }
</style>

<label for="name" class="required-label">Name</label>
<input type="text" id="name" name="name">
<span class="error-text">Error: Field is required.</span>

Name Error: Field is required.

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult