Color is a powerful visual tool in both the real and digital worlds. It conveys mood, adds presence, and provides aid in distinguishing information. However, while color offers significant design advantages, relying solely on color to convey content can be ineffective.
According to the World Health Organization, over 2.2 billion people across the globe suffer from vision impairments that encompass a wide range of conditions that affect a person’s ability to perceive color accurately. This staggering statistic underscores the importance of considering accessibility when designing digital experiences. Relying too heavily on color distinctions in digital products could make it difficult for users with color-deficient vision to navigate digital products. In this article, I’ll explore some proven strategies and best practices for achieving color independence in digital products, covering topics from grayscale tests to accessible data visualization.
Champion Advertisement
Continue Reading…
Understanding Color-Vision Impairments
Before creating designs using color, you must understand the challenges that people with color-deficient vision face. Over 99% of these people do see colors—just not the colors those with normal color vision see, as Figure 1 shows. Thus, the term colorblind is not really accurate in cases other than achromatopsia.
Figure 1—Common forms of color-deficient vision
There are three types of dichromacy, or color-deficient vision, as follows:
deuteranopia—A common type of color-deficient vision that many refer to as red-green color blindness makes it challenging to distinguish between red and green and differentiate blue from purple.
protanopia—Another form of color-deficient vision that also results in red-green color blindness, which is more common among men.
tritanopia—Also referred to as blue-yellow color blindness, tritanopia is more rare and affects men and women equally. Those with this deficiency may see blue as green and yellow as gray or violet and have difficulty distinguishing pink.
Figure 2 shows the impacts of color-deficient vision.
Figure 2—Colors as experienced by people with color-deficient vision
Achromatopsia, or complete color blindness, is extremely rare. Individuals with this condition cannot distinguish colors at all and see everything in shades of gray.
All of these vision impairments affect users’ interactions with digital products. User-interface elements such as error messages or clickable buttons that rely solely on color to convey information are difficult for colorblind people to interpret correctly.
The Importance of Color-Independent Design
Color-dependent designs are challenging for users with color-deficient vision. Approximately one in twelve men and one in two hundred women have some form of color-deficient vision. By prioritizing color independence, you can enhance usability and inclusivity and help businesses reach a wider target audience. Screen readers cannot interpret visual information, including color. Therefore, any information that a user interface (UI) conveys through color alone is not accessible to these users. It is essential to consider both non-visual and visual users who cannot access color. Information that is highlighted with color must also be communicated textually to be effective.
Now that you understand the impacts of color-deficient vision and the pitfalls of color dependence in design, let’s explore some actionable strategies that ensure inclusivity and usability for all users. Here are some best practices to consider when designing digital user interfaces.
1. Integrate Accessibility into Design from the Start
Prevent accessibility issues rather than fixing them. Waiting until the end of a project to check for color independence can snowball into issues that make fixes more complex and time-consuming, which can jeopardize your ability to meet deadlines or stay within budget. By incorporating accessibility checks early on, you can avoid these pitfalls and ensure a smoother design process.
Early detection—Catch potential issues early so you can make adjustments without their requiring major overhauls.
Compliance—Adhering to accessibility standards can help you meet legal requirements and avoid potential liabilities.
2. Ensure Accessibility with a Grayscale Test
The grayscale test is a simple yet powerful method of identifying color-dependency issues in your UX designs. By converting designs to grayscale using a plugin, you can see how they appear without color and assess whether the designs effectively convey all the necessary information. Periodically checking whether a user interface passes a grayscale test simulates complete color blindness, or achromatopsia, the most severe form of a color-vision deficiency. Thus, you can design for this worst-case scenario from the beginning of your design process. Convert your designs to grayscale, then ask yourself and others with fresh eyes: “Is there anything you can’t identify or tell the difference between with the hues gone?” Figure 3 shows a grayscale test for a user interface.
Figure 3—Periodically check whether a UI passes a grayscale test
Figma plugins such as Grayscale and Black and white make the process of grayscale testing easy and seamless.
3. Use Text with Color
You must provide textual alternatives to the use of color when using color to prompt users to take action. For example, the text “Click the green button to begin the test” is not accessible, and users who cannot distinguish between colors would become frustrated and confused. Use more suitable labels and the same label text in the instructions—for example, “Click the Start button to begin the test.” Figure 4 depicts an over-reliance on color in a message and a remedy for that issue.
Figure 4—Using clear text rather color to convey a message
4. Design Accessible Links
The links on Web sites and in apps must be distinguishable from the surrounding body text to allow users to quickly identify and proceed with their tasks. Relying solely on color to differentiate links from the regular body text can pose difficulties because the links might blend in with the surrounding text, as shown in Figure 5. To enhance visibility, underline links and use high-contrast colors, as shown in Figure 6. Avoid relying on color changes alone to signify clickable elements because this would be ineffective for users with color-vision deficiencies.
Figure 5—Designing accessible links by emphasizing them visually Figure 6—Insufficient color contrast between active and default states
5. Enhance Menu-Item Visibility
Navigation bars and menu items are present in most digital applications, including Web sites, mobile applications, and dashboards. If menu items use only color to indicate their selected state, as Figure 7 shows, users might struggle to discern which link is active. Enhancing selected states by using underlines, bold text, icons such as checkmarks, or highlighted borders, as shown in Figure 8, provides a clear indication of the active item. These strategies ensure that all users, regardless of their visual abilities, can navigate and interact with your content effectively. Also, be sure to use colors with sufficient contrast between selected and default states.
Figure 7—Insufficient color contrast between active and default states Figure 8—Distinguishing the selected state with color and underlining
6. Create Inclusive Progress Trackers
Progress trackers play a pivotal role in guiding users through complex processes such as checkout flows and registration forms, ensuring a seamless user journey. Incorporate shapes, labels, and numbers to offer clear, inclusive progress indicators. By utilizing distinct shapes such as circles or squares to represent each step, with text labels or numerical markers within the progress indicators, you can facilitate the comprehension of users, regardless of their visual capabilities, as Figure 9 shows. You should prioritize high contrast between the progress indicator and its background to further improve visibility, as Figure 10 demonstrates.
To enhance accessibility when designing error messages, incorporate additional visual cues such as icons, bold text, or patterns in addition to color. For instance, integrating an exclamation mark icon with a red border and presenting the error message in bold text can improve comprehension, as shown in Figure 11. When styling error messages, focus on structural modifications such as adding icons or adjusting indentations rather than relying solely on changing colors. This prevents reliance on color alone in conveying meaning. Prioritize working in black and white initially to ensure that indications of errors are not color dependent. Also, consider using thicker borders for fields with errors to enhance their visibility. Plus, positioning error messages and helper text below field labels and above input fields ensures that screen readers prioritize reading the instructions for resolving errors that you’ve included to guide users, as Figures 12 and 13 show. Be sure to make error messages visually pleasing.
Figure 11—Highlighting message text by changing its color Figure 12—Using color icons, borders, and helper text above fields Figure 13—Checking your final designs with a grayscale test
8. Create Accessible Data Visualizations
To design data visualizations that are accessible to all, in addition to using color effectively, integrate patterns, textures, and labels to convey data effectively. Directly associating text labels with data points or bars enhances their accessibility by providing alternative means of interpretation. Also, prioritize high contrast between the various elements within charts and graphs to facilitate clear distinctions between them for all users, as shown in Figures 14–15.
Figure 14—Accessible pie charts with sufficient color contrast Figure 15—Various line patterns and weights in line diagrams Figure 16—Bar charts with contrasting colors
Conclusion
“When UX doesn’t consider all users, shouldn’t it be known as some user experience, or SUX?”—Billy Gregory, a Senior Accessibility Engineer
This quotation reminds UX designers that we design for a broad spectrum of users and each user’s experience is important. Crafting designs with color independence in mind isn’t just about meeting a checklist of accessibility standards; it’s about embracing inclusivity as a fundamental design principle. By prioritizing flexibility in color choices, distinguishable contrast ratios, and clear communication through other design elements, we can empower all users to engage with our creations seamlessly, regardless of their visual abilities.
Remember, accessibility isn’t a feature to tack on at the end—it’s the cornerstone of exceptional UX design. As design experts, let’s continue championing diversity, empathy, and innovation in our work. Together, we can ensure that every digital experience is not only beautiful but truly accessible to all.
As a passionate UX designer with a keen eye for detail and a focus on user-centric design, Keenan specializes in transforming complex problems into elegant solutions. He aims to drive meaningful impact through innovative design across various platforms and industries. He holds a Bachelor’s in Architecture and a Master’s in Design. Read More
