Color is a very important aspect in designing a webpage, but using color alone to convey information might be inaccessible for some users.
The use of color to convey meaning creates problems for people with low vision, color perception deficiencies, and color blindness. Users who have color deficiencies struggle to navigate their way through color-drenched content. Therefore to convey information within a webpage, using only color is ineffective.
While using color for design is not discouraged, content creators need to keep color accessibility in mind.
Why one should avoid using color alone
- The color may not be seen by users with color deficiencies.
- Screen readers do not read aloud visual information. Therefore, the screen reader does not read color information.
- People using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.
- People with partial sight often experience limited color vision, and many older users do not see color well, and when using only color, some information may be inaccessible for users.
Best practices
- Make sure that colors are not the only method of conveying important information
- Information conveyed with color must also be communicated textually to be effective.
- Provide shapes, patterns, text equivalent, or other visual differentiation in addition to color to differentiate content
- Don’t provide instructions that rely on color or other sensory characteristics
Exceptions
Graphic elements that don’t support the functions of a website are an exception. This includes icons that are non-interactive and icons that are used adjacent to text that describes what the icon represents.
While color requirement is not applicable for these types of content, make sure to put appropriate alternative texts to any images.
Example
Alt text = ”sign up”
This button is considered accessible because not only it satisfies the color contrast requirements, the functionality of this button is conveyed by label text and alternative text in addition to color.
How to Test Color Accessibility
- Is there another method other than color being used as a method to convey information?
- To check if a web page is accessible without color: Colorblind Web Page Filter.