Web Governance
Color is not used as the only visual means of conveying meaning
1.4.1 Use of Color
This document gives information about the related accessibility checks:
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.
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.
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.”
This section gives some examples of the issue.
A car rental website displays search results for available cars using three color-coded icons to indicate availability:
Although the page includes a legend explaining the meaning of each color, users who cannot distinguish colors due to color blindness are unable to identify which status applies to each car.
Here is what the same page looks like in greyscale:
A car rental website displays search results for available cars using three color-coded icons, supplemented by text and symbols, to indicate availability:
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.
Here is what the same page looks like in greyscale:
How to review it.
The Web Governance platform highlights all pages for review regarding the use of color.
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, which allows you 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.
If you determine that your content can be understood and used even without color, you can mark this issue as "Reviewed."
For instructions, see the user guide article:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
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.
Here is what the same page looks like in greyscale:
How to review it.
The Web Governance platform highlights all pages for review regarding the use of color.
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, which allows you 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.
If you determine that your content can be understood and used even without color, you can mark this issue as "Reviewed."
For instructions, see the user guide article:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance