How to Use AI and Other Design Techniques to Improve Dashboard Accessibility

Why I Chose This Topic

The purpose of a UI dashboard is to offer seamless access to intuitive visual insights, making it effortless for users to resolve complex challenges across different domains. I am passionate about making technology accessible to everyone, including people with color blindness. I believe that we can find ways to use accessibility to improve the user experience for everyone.

Understanding Color Blindness

Some statistics:

• 17.3% of all computer systems administrators are women, while 82.7% are men (source)
• 1 in 200 women are color blind (1%), but in men, it’s 1 in 12 (8%) (source)

Color blindness can affect anyone, although it is more common in men. This article discusses strategies and techniques that can assist individuals with color blindness, regardless of their gender. By gaining a deeper understanding of the challenges faced by those with color blindness, we can develop inclusive solutions that enhance accessibility and user-friendliness for all individuals.

Color blindness is a condition where people have difficulty distinguishing between certain colors. The severity of the condition can vary from person to person. There are several types of color blindness, but the most common type is deuteranomaly. People with deuteranomaly have difficulty distinguishing between red and green colors, and it affects about 5% of the male population.

The Problem

Color is a critical element in our dashboard design. We use color to visually represent imported data, such as low stress versus high stress, and critical errors that demand immediate attention. It is important to consider how all users perceive color, as not everyone sees colors the same way. For some users, the option to rely on color differences is not enough, so there is a need for different solutions.

When we rely on color only (which is a very common practice when designing a product dashboard), we may forget to take into account color blindness. This is a condition that affects millions of people worldwide, and it can make it difficult to distinguish between certain colors. To ensure that individuals with deuteranomaly can effectively interpret the information conveyed by our widgets without any visual hindrances, we need to use alternative methods to communicate color information.

One of the early tests I did was using a mobile app named CVSimulator. This app allowed me to simulate different types of color blindness and see how they affect the way I perceive colors. By using this app, I was able to identify some of the challenges that people with deuteranomaly face when using our dashboard.

Image 1: Normal Vision vs. Simulated Deuteranopia (Before and After)

Existing Tests

There are a variety of online color blindness tests available. These tests can be used to build special filters to improve dashboard accessibility. It is important to note that online color blindness tests are not always accurate, and they should not be used as a substitute for a diagnosis from an eye doctor.

Some of these tests offer to test what kind of color blindness a person has, while others can even dig a little deeper and check the severity of their eyesight state by showing them visual examples that get harder and harder to differentiate between the colors.

How AI Can Help

• Color Space Transformation: AI algorithms can be used to improve the accessibility of dashboards for people with color blindness in a variety of ways. One way is to use color space transformation. This involves converting images from RGB to alternative color spaces like LMS or Lab. This helps improve color distinguishability for color-blind users because these alternative color spaces are designed to take into account the way that people with color blindness see colors.

Image 2: Color Space Transformation (Before and After Transformation)

• Image Processing and Enhancement: AI algorithms apply techniques like contrast adjustment, color amplification, and edge detection to enhance visual elements for color-blind users, making them more visible and distinguishable.

Image 3: Image Processing and Enhancement (Left: Original Image, Right: Enhanced Image)

• Learning from Data: AI learns color perception challenges from color blind simulation data. It then recognizes colors based on their distinguishability, which may include identifying instances where red and green are indistinguishable for individuals with deuteranopia. In response, AI can create alternative color schemes, such as substituting red with distinguishable colors like purple, or it can make real-time adjustments to ensure that critical information remains visible and clear to color-blind users.

Image 4: Learning from Data (Original Colors vs. Alternative Colors)

• Personalization: AI customizes visuals based on user feedback, adapting colors, contrast, and cues for individual accessibility needs.

Image 5: Personalization (Original Colors vs. Alternative Colors). Photo by Martin Adams on Unsplash

Other Options to Help with Accessibility

By assigning labels or patterns to various data points, you can reduce reliance on color alone, significantly improving the speed and ease of data interpretation.

Using negative space effectively aids in distinguishing elements, enhancing overall readability.

Image 6: Enhancing Legibility with Negative Space and Patterns

Image 7: Distinguishing Data with Shapes, Textures, and Patterns

Using patterns and negative space can benefit all users, not just those with color blindness. These design strategies can improve clarity by making it easier to distinguish between different elements on a dashboard. For example, adding patterns to bars can help to break them up and make them easier to see, and incorporating negative space can help to create visual separation between different sections of the dashboard.

Combining these solutions can further improve the distinction between segments, ensuring a user-friendly experience for everyone.

In Conclusion

About 8% of men are color blind and may have difficulty seeing the UI as intended. We can help solve this in several ways:

• Real-time color simulation. By applying color filters in real-time, the dashboard can provide users with an immediate preview of how their customized colors will be perceived by individuals with specific color vision deficiencies.
• Machine learning. AI can be trained using machine learning techniques to recognize and classify different visual elements based on their colors. This can be used to automatically suggest premade color templates, better contrast, labels, or the use of patterns, following the WCAG standards.

By utilizing these AI-powered techniques, we can effectively enhance the accessibility and usability of our SaaS product’s dashboards for color-blind users. These advancements enable a more inclusive experience, ensuring that all users can effectively interpret and interact with the visual information presented, regardless of their color vision abilities.