--- title: "Is color alone used to convey meaning?" date: "2024-11-27T13:57:14+00:00" summary: "Ensure color isn't the sole means of conveying information. Learn to use additional visual cues for improved accessibility." image: type: "page" url: "/web-governance/color-alone-used-convey-meaning" id: "0e8de3ec-b23c-404d-b4f6-5e1aa29da324" --- 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 ![A young woman with long hair in a flowered dress standing outside.](https://acquia.widen.net/content/3606c14d-8b08-4bd3-88f2-7ef30001de7c/web/Mon_AccessibilityHelpCenter-UserStory-WomanStandingOutside.png) 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. ![A web page is showing search results for rental cars. Each car has a color - green, yellow or blue - associated to it indicating availability. A legend explaining what the colors mean show at the top of the list.](https://acquia.widen.net/content/9bf33158-3f58-4271-8783-6138aa684a0e/web/Mon_AccessibilityGuide-Example-ColorOnly.png) 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: ![A web page is showing search results for rental cars - in greyscale. Each car has a color - green, yellow or blue - associated to it indicating availability. A legend explaining what the colors mean show at the top of the list. It's impossible to distinguish the colors due to the greyscale view.](https://acquia.widen.net/content/94d4ada2-507b-494b-88b8-199a088fdc94/web/Mon_AccessibilityGuide-Example-BWColorOnly.png) ### 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. ![A web page is showing search results for rental cars. Each car has a color - green, yellow or blue - associated to it indicating availability. Each color has a symbol on it and text explaining what the status of the car is.](https://acquia.widen.net/content/48fb61d1-2efc-41a2-8335-7347edf2df29/web/Mon_AccessibilityGuide-Example-ColorAndSymbol.png) 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: ![A web page is showing search results for rental cars - in greyscale. Each car has a color - green, yellow or blue - associated to it indicating availability. Each color has a symbol on it and text explaining what the status of the car is. Although the colors are not clear in greyscale view, visitors can use the accompanying information to understand the status of the car.](https://acquia.widen.net/content/a81bcb41-a461-46e8-90de-33a8e0b85409/web/Mon_AccessibilityGuide-Example-BWColorAndSymbols.png) 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](/web-governance/how-review-accessibility-issue "How to review an accessibility issue"). Additional resources -------------------- ### WCAG success criteria [1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color)