Understanding the Challenges of Color Blindness on the Web: A Deep Dive into Zipkin Monitoring Tool and Improving Accessibility

Introduction: Unveiling the Hidden Challenge

In the realm of software development, there are moments that can be both challenging and enlightening. Picture this — it was a late evening, and our automated monitoring systems triggered an alert. The reason? An uptick in frequent errors occurring in API calls between two microservices. As we scrambled to address this issue, an unexpected hero emerged — a colleague with color blindness.

In this real-world scenario, our colleague with color vision deficiency stepped in to analyze the problem. The first tool of choice was Zipkin, a powerful platform for tracing and diagnosing performance issues within microservices. This choice, however, soon revealed an unexpected hurdle due to our colleague’s color blindness.

As he began his analysis, our colleague navigated to Zipkin, hoping to identify the microservices involved and understand when these errors occurred. Zipkin, in its “Find a Trace” section, highlights successful flows with a light shade of blue and problematic flows with a light shade of red. It seemed straightforward for those with normal color vision — blue indicating success and red highlighting errors.

Zipkin presents with a light shade of red a problematic flow.

However, for our colleague who was color blind, this distinction was invisible. He looked at the traces and saw low difference between the two colors. It was as if Zipkin had hidden this critical information behind a curtain of invisibility.

In the vast spectrum of the digital universe, colors play a paramount role in conveying information, emotions, and meaning. But have you ever stopped to think about the challenges faced by those who perceive colors differently? With the rise of tech, it becomes crucial to address the problems faced by color-blind individuals on the web.

Zipkin, a popular distributed tracing system, is one such tool. For developers, understanding the intricate networks of interactions among services is vital, and color often plays a pivotal role in doing so. But for those with color blindness, Zipkin’s color schemes may pose challenges.

In this article, we’ll delve deep into the obstacles faced by color-blind users, especially with tools like Zipkin. We will also explore actionable steps to improve accessibility, suggesting alternative themes for those suffering from color blindness.

Understanding Color Blindness

Before we delve deeper into the issue at hand, let’s briefly understand color blindness.

Color blindness, or color vision deficiency, is a visual impairment that affects one’s ability to perceive certain colors accurately. It occurs when there’s a deficiency or absence of one or more types of photopigments in the eye’s cone cells. These photopigments are responsible for detecting different wavelengths of light, allowing us to see a broad spectrum of colors.

The Three Primary Types of Color Blindness

• Red-green color blindness: is the most common type. It occurs when there is a problem with the red or green cone pigments in the eye, making it hard to tell apart red and green colors. There are four subtypes of red-green color blindness: deuteranomaly, protanomaly, protanopia, and deuteranopia;
• Blue-yellow color blindness: is a rare type. It occurs when there is a problem with the blue cone pigment in the eye, making it hard to tell apart blue and yellow colors. There are two subtypes of blue-yellow color blindness: tritanomaly and tritanopia;
• Total color blindness (achromatopsia): is a very rare type. It occurs when there is a complete absence or malfunction of all three cone pigments in the eye, making it impossible to see any colors at all. People with total color blindness only see shades of gray, black, and white.

Challenges in Navigating the Web

Understanding these various types of color blindness is crucial, as it allows us to create more inclusive and accessible designs, both in the digital and physical worlds. Designing with these differences in mind ensures that everyone, regardless of their vision, can fully participate in and enjoy the rich tapestry of colors that surrounds us.

But what are the challenges we face when using the web?

This image explains very well how big the problem can be for a person with color blindness.

1. Distinguishing Links

Links are the backbone of web navigation, but they often rely on color cues to stand out. For color-blind individuals, distinguishing between regular text and hyperlinks can be a real challenge. This is especially true when links are only differentiated by color. To address this issue:

• Underline Links: One effective solution is underlining links in addition to using color. This dual approach makes it clear to all users, including those with color vision deficiency, which text is clickable.
• Consistent Styling: Maintain consistent link styling throughout the website. If links are styled a certain way, such as being underlined, it should be uniform across the site.

2. Understanding Graphs and Charts

Color-coded graphs and charts are widely used for data visualization. However, they can pose significant challenges for those with color blindness, especially when multiple shades of a single color are employed. Here’s how to address this challenge:

• Use Patterns and Labels: To make graphs accessible, incorporate patterns or textures along with colors to differentiate data sets. Additionally, provide clear labels for each data point to ensure that everyone can understand the information being presented.
• High Contrast: Ensure a strong contrast between different elements in the chart. This not only aids color-blind users but also improves readability for all users.

3. Form Errors

Forms on websites often highlight errors using color cues. When an error is indicated solely through color changes, a color-blind individual may miss the problem. To enhance the user experience for all:

• Textual Error Messages: In addition to color changes, include clear and concise textual error messages that describe the issue and how to rectify it. This helps all users, including those with color vision deficiencies, to understand and resolve errors.
• Icons or Symbols: Consider adding icons or symbols alongside color changes to indicate errors. This provides a visual cue that is not reliant on color alone.

4. Text and Background Color Contrast

Low color contrast between text and background can present difficulties for users with color blindness. To ensure that text is easily readable:

• High Contrast Text: Use high contrast between text and background colors. This not only benefits color-blind users but also improves readability for all users.
• Accessibility Checkers: Employ accessibility checkers and tools to verify that the color contrast ratios comply with Web Content Accessibility Guidelines (WCAG).

Addressing these challenges in web development and design promotes inclusivity and ensures that color-blind users can engage with web content effectively. By implementing these practices, you create a better user experience for everyone, regardless of their visual abilities.

Zipkin: A Case Study

Zipkin, as a distributed tracing system, employs colors extensively to depict complex data. For a color-blind individual:

1. Trace Visualization: The varied color patterns can become indistinguishable.
2. Dependency Diagrams: Color-coded dependency diagrams can appear confusing, with certain nodes and links being virtually indiscernible.
3. Alerts and Highlights: If a problematic service is highlighted using colors, it can easily be overlooked by someone with color blindness.

Let’s take a closer look at Zipkin’s Summary page. This page is crucial for making queries to search for problematic events within a chain. However, it heavily relies on color cues to convey vital information.

The main page of Zipkin relies on color to track problems.

On this page, the only way to identify if a trace has a problem is to check the color in the Duration column. Here, a bar in light red indicates a problem, while light blue signifies a successful trace. However, there are two key problems with this approach, particularly for color-blind users:

1. Text Visibility: The color bars are used to convey trace status, but they often lack sufficient contrast with the text placed within them. This can make the text challenging to read for color-blind individuals.
2. Color-based Status: A user can track the status by the bar color. This can be a probl for color-blind individuals.

Proposed Improvements

To enhance the accessibility of Zipkin and improve the experience for all users, here are some suggested improvements for the Summary page:

1. Enhance Text Visibility: Increase the contrast of text within the color bars. This can be achieved by relocating the text outside the color bar, placing it above or below, to make it more visible.
2. Use Icons: Consider adding icons next to the color bars to provide an additional visual indicator of a problematic trace. Icons can be universally understood and ensure that even color-blind users can immediately identify issues.
3. Theme Selection: Implement a theme selection feature that allows users to choose from different themes with altered color palettes and increased contrast. This customization would accommodate various accessibility needs and personal preferences, ensuring that Zipkin is adaptable to a wider range of user requirements.

By implementing these changes, Zipkin can become a more inclusive and user-friendly tool, ensuring that color blindness doesn’t hinder effective tracing and diagnostics within distributed systems.

Enhance Text Visibility

Zipkin’s Summary page features a visualization of trace duration in the “Duration” field using a fill bar. This bar indicates a temporal comparison with other traces and is color-coded to represent the trace’s status. However, having the text positioned at the same level as the bar can create difficulties in reading the timing information, especially for users with color blindness.

To improve the legibility and accessibility of this critical data, it is proposed to relocate the time information above the color bar.

Implementation

To achieve this, modifications were made to the TableCell responsible for the “Duration” field. The changes involved altering the construction of the “DurationBar” element by adjusting its height (50%) and position top (80%).

For the text, a position top of -4px was added to position it precisely above the color bar, ensuring optimal legibility. The alignment was set to the left, as people tend to scan elements following their natural reading direction, which, in our case, is from left to right.

The final result improves readability.

Use Icons

As previously discussed, Zipkin heavily relies on color cues to indicate issues within a trace. However, for individuals with color blindness, this approach can pose a significant challenge. To address this accessibility concern, an icon has been introduced to enhance the user experience.

Implementation

In Zipkin, the icon is displayed when a traceSummary element is associated with either the “trace-error-critical” or “trace-error-transient” infoClass, indicating a critical or transient problem within the trace.

The introduced icon takes the form of an exclamation point, a universally recognized symbol that effectively communicates the presence of an issue in the trace. This visual indicator offers a clear and accessible way to highlight trace problems, ensuring that color-blind users can immediately discern when something requires attention.

The final result highlights a problematic trace.

Theme Selection

The option to choose different themes for those who have difficulty distinguishing colors is a common solution to enhance website accessibility. In this case, we have implemented a theme selector that offers three distinct themes:

• Light: This is the standard light theme that follows Zipkin’s default color palette.
• Dark: The dark theme is designed to improve the user experience in low-light situations. In this theme, the base background color is changed to a dark shade, ensuring clear and contrasting text. Additionally, colors are slightly more pronounced.
• High Contrast: The high-contrast theme is a modification of the light theme that enhances color contrast. It particularly accentuates the color palette used for highlighting buttons and trace errors, ensuring improved visibility and contrast with any text present on the colored background.

Implementation

To facilitate theme selection, a ThemeSelector component has been created. Users can choose the theme that best suits their preferences and accessibility needs. Upon selecting a new theme, the handleMenuItemClick callback is triggered. This callback sets the chosen theme in the browser's localStorage using the setTheme function and then reloads the page to apply the selected theme.

Initially, the code defined a single theme. However, it has been expanded to encompass the three themes described above. For each theme, the color palette, the name displayed in the selection menu, and a customizable color palette used for highlighting services within a trace have been adapted.

The application is initialized with the previously selected theme, which is stored in the browser’s localStorage. If a previously selected theme is not found, the default theme (Light) is applied.

This functionality is managed through the getCurrentTheme function, which, in turn, calls the getTheme function to determine the theme selected in localStorage.

This is how the main page of Zipkin looks with various themes.

Conclusion

In this journey to enhance the accessibility and user-friendliness of Zipkin, several significant improvements have been made to address challenges faced by color-blind users. These changes not only improve the experience for individuals with color vision deficiencies but also contribute to creating a more inclusive and accommodating tool for all users.

Achievements

• Enhance Text Visibility

One of the key improvements introduced was the enhancement of text visibility within Zipkin’s Summary page. By repositioning the timing information above the color bar, legibility was significantly improved for all users.

• Use Icons

To address the reliance on color-coded cues for indicating issues within traces, an exclamation point icon was introduced. This provides a universally understood visual indicator of trace problems, ensuring that color-blind users can easily identify issues.

• Theme Selection

The implementation of a theme selection feature has allowed users to choose from three distinct themes: Light, Dark, and High Contrast. This customization accommodates a wide range of accessibility needs and personal preferences, enhancing the overall user experience.

Future Developments

As we look ahead, there are several potential avenues for further improvements and developments:

1. In-Depth Theme Study: A more comprehensive study on the themes that can be made available to users and the selection of suitable colors for various types of color blindness and visual impairments. This can involve research on optimal color choices and their impact on accessibility.
2. Merge Request on Official Zipkin Project: The changes and improvements made within this project can be proposed as a merge request to the official Zipkin project. This would ensure that the broader user community can benefit from the enhanced accessibility features.
3. User-Customized Themes: A future development could involve allowing users to create their personalized themes, tailoring Zipkin’s appearance to their individual needs and preferences. This would empower users to make Zipkin truly their own.

In conclusion, the work undertaken in this project marks an essential step toward making Zipkin more accessible, user-friendly, and inclusive. By addressing color blindness and accessibility challenges, Zipkin can continue to evolve into a tool that benefits a wider range of users, irrespective of their visual abilities.

GitHub - giaroc/zipkin at zipkin-improve-accessibility-blindness