Is color alone used to convey meaning?

Is color alone used to convey meaning?

1.4.1 Use of Color

Introduction

This document gives information about the Acquia Web Governance accessibility check:

• Is color alone used to convey meaning?

What

Ensure that color is not the only visual method used to convey information, indicate actions, prompt responses, or distinguish visual elements. Use additional indicators such as text labels, icons, or patterns to make the content accessible to all users.

Why

Color can significantly enhance the visual experience. It helps users quickly identify important information, such as errors in a form or the status of tasks, and can guide them through interactive elements like links or buttons. However, not all users perceive color in the same way. Individuals with color blindness may not distinguish between certain colors such as red and green, which can lead to confusion or missed information. For instance, if form fields with errors are marked only in red, these users might not realize which fields need correction.

Furthermore, older users or those with partial sight often have reduced color perception, and some devices, like monochrome screens, may not display colors at all. In such cases, essential information or prompts that are conveyed only through color, such as a green checkmark for success or a red outline for errors, become inaccessible. Use additional visual cues like text labels, icons, or patterns, to ensure that all users, regardless of their ability to perceive color, can access and understand the content. This approach not only improves accessibility but also ensures that the user experience is consistent across different devices and environments.

Who

This check affects the following users who have

• Color blindness: Who may not distinguish between colors like red and green, which makes it difficult to identify important information or errors.
• Partial sight or age-related vision impairments: Who often have reduced color perception and may miss information if it is conveyed solely through color.
• Monochrome displays or limited-color environments: Who cannot access color-based information due to hardware or environmental limitations.

User story

Priya Patel is a 29-year-old urban planner of South Asian descent, living in Mumbai. With monochromatic vision, Priya experiences the world in various shades of gray, with no color differentiation.

“I was organizing a work trip for my team, and booking a car should have been a straightforward task, right? But when I opened the booking system, all of the available cars were marked in green, and the booked ones in red. To me, it all looked like the same dull shade. I clicked around, but I could not figure out which cars were free.

It is such a small thing, but I had to call a colleague over to help me. Imagine that, asking for help just to click a button. It felt frustrating, like, why should something so simple be such a hassle? This is not the first time either. It is a reminder that even in this big, modern city, people like me are often left out of the picture when systems are not designed with everyone in mind.”

Examples

This section provides some examples of the issue.

Example: Poor indication of availability categories

A car rental website displays search results for available cars using three color-coded icons to indicate availability:

• Green: The car is fully available for the selected dates and pick-up location.
• Yellow: The car is available, but only a limited number remain.
• Blue: The car is available, but only from an alternative pick-up location.

Although the page includes a legend that explains the meaning of each color, users who cannot distinguish colors due to color blindness are unable to identify which status applies to each car.

The example below is the same page in greyscale:

Example: Accessible indication of availability categories

This check affects the following users who have

• Color blindness: Who may not distinguish between colors like red and green, which makes it difficult to identify important information or errors.
• Partial sight or age-related vision impairments: Who often have reduced color perception and may miss information if it is conveyed solely through color.
• Monochrome displays or limited-color environments: Who cannot access color-based information due to hardware or environmental limitations.

Examples

This section provides some examples of the issue.

Example: Poor indication of availability categories

A car rental website displays search results for available cars using three color-coded icons to indicate availability:

• Green: The car is fully available for the selected dates and pick-up location.
• Yellow: The car is available, but only a limited number remain.
• Blue: The car is available, but only from an alternative pick-up location.

Although the page includes a legend that explains the meaning of each color, users who cannot distinguish colors due to color blindness are unable to identify which status applies to each car.

The example below is the same page in greyscale:

Example: Accessible indication of availability categories

A car rental website displays search results for available cars using three color-coded icons, supplemented by text and symbols, to indicate availability:

• Green with a checkmark icon: "Fully Available." The car is available for the selected dates and pick-up location.
• Yellow with an exclamation mark icon: "Limited Availability, Book soon!" Only a limited number of cars remain for the selected dates and pick-up location.
• Blue with a location pin icon: "Alternative Pick-Up Location." The car is available, but only from a different pick-up location.

This approach ensures that users who cannot perceive color differences can still easily identify the status of each car. The icons and descriptive text provide multiple ways to convey availability, making the system inclusive and accessible for all users.

The example below is the same page in greyscale:

How

This section provides information on how to identify and review the issue.

How to identify it

The Acquia Web Governance platform highlights pages for review when the use of color is detected.

How to review it

Examine the content and determine whether any of it relies on color perception to be understood or used effectively by individuals who cannot distinguish colors. Pay particular attention to the following: instructions, interactive elements, data visualizations, infographics, status indicators, and form validations.

To make it easier, use the Web Governance Browser Extension to view your page in grayscale. This can help you quickly assess whether users who cannot distinguish colors are able to use your content effectively.

1. Open the Browser Extension.
2. Select View Options (eye icon) from the toolbar.
3. Select Vision deficiencies on the View Options page to expand the menu.
4. Select Achromatopsia.

If you determine that your content can be understood and used even without color, you can mark this issue as Reviewed.

For more information, visit How to review an accessibility issue.

Additional resources

WCAG success criteria

1.4.1 Use of Color

A car rental website displays search results for available cars using three color-coded icons, supplemented by text and symbols, to indicate availability:

• Green with a checkmark icon: "Fully Available." The car is available for the selected dates and pick-up location.
• Yellow with an exclamation mark icon: "Limited Availability, Book soon!" Only a limited number of cars remain for the selected dates and pick-up location.
• Blue with a location pin icon: "Alternative Pick-Up Location." The car is available, but only from a different pick-up location.

This approach ensures that users who cannot perceive color differences can still easily identify the status of each car. The icons and descriptive text provide multiple ways to convey availability, making the system inclusive and accessible for all users.

The example below is the same page in greyscale:

How

This section provides information on how to identify and review the issue.

How to identify it

The Acquia Web Governance platform highlights pages for review when the use of color is detected.

How to review it

Examine the content and determine whether any of it relies on color perception to be understood or used effectively by individuals who cannot distinguish colors. Pay particular attention to the following: instructions, interactive elements, data visualizations, infographics, status indicators, and form validations.

To make it easier, use the Web Governance Browser Extension to view your page in grayscale. This can help you quickly assess whether users who cannot distinguish colors are able to use your content effectively.

1. Open the Browser Extension.
2. Select View Options (eye icon) from the toolbar.
3. Select Vision deficiencies on the View Options page to expand the menu.
4. Select Achromatopsia.

If you determine that your content can be understood and used even without color, you can mark this issue as Reviewed.

For more information, visit How to review an accessibility issue.

Additional resources

WCAG success criteria

1.4.1 Use of Color