Use of Color

The Color Use Rule

Don’t use color as the only way to provide information.

What Does It Mean?

People who can’t perceive color will have no way to understand color coded information. Screen readers don’t translate color into meaning.

Who Does It Help?

Everyone. Especially people with color-blindness and blindness.

Example

A web form collects ten pieces of information from a user, including name, address and phone number.

The user forgot to enter the phone number before hitting the “submit” button. 

A message at the bottom states, “Invalid input” and the phone number field turns red. 

The user is color-blind.

How can they easily tell which field they missed? 

What if the real error is that they entered the phone number as 555-5555 instead of (502) 555-5555, so the field isn’t empty, but incorrect?

Solution

Keep the field red. It won’t help people who can’t see it, but color can help others. The key is to make sure color isn’t the only way to notify the user.

Add meaningful error messages.

For example, add text at the bottom that reads, “Invalid/missing phone number. Correct format is: (xxx) xxx-xxxx. Please enter correct information and re-submit”. 

FAQ

Additional information: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html