Intermountain Health Performance Colors made more Accessible
Healthcare
Intermountain Health Performance Colors made more Accessible
The original metrics on the platform and displayed on printed reports were displayed using a red and green color palette, which presented significant accessibility issues. Many employees and patients, who were color-blind, struggled to distinguish between the data points, as both red and green appeared as shades of gray to them. This not only hindered their ability to understand the data but also led to confusion and misinterpretation of critical information. The goal was to develop a color palette that would be accessible to all users, particularly those with color blindness, while maintaining the brand’s visual identity. However, because this would be a change across Intermountain Health's large system, the top executive committee was involved.
Team member, researcher, and designer
Problem Statement: Intermountain Health's original red and green color palette created significant accessibility challenges, particularly for color-blind users who struggled to distinguish between data points, leading to misinterpretation of critical information. Additionally, the initial redesign of the palette, while more accessible, did not fully align with the brand’s visual identity and required further revisions. The challenge was to create a color palette that was both accessible to all users, including those with color blindness, and consistent with the brand's aesthetic.
Process and Method
Evaluation of Red-Green Color Palette and Resulting Report
- Intermountain Health's top executives were not convinced they had to spend money on changing the red-green color palette used on hundreds of printed and digital reports.
- I was asked to create a report that demonstrated the difficulty that color-blind employees and patients would have when reading metrics and other assets that used the default red-green palette to show performance and patient outcomes.
- The project began with thoroughly evaluating the existing red and green color palette.
- Using color blindness simulators in Adobe and Figma, I demonstrated that for users with red-green color blindness, one of the reds and one of the greens appeared as nearly identical shades of gray.
- This issue made it nearly impossible for color-blind users to distinguish between critical data points, leading to confusion and errors in data interpretation.
- I shared with the executives my report showing that one of the reds and one of the greens looked like the same color to those with red-green color blindness, and I recommended a new palette with blue and orange.
- These leaders agreed that a change needed to be made, and I worked with a committee to create an improved palette.
Initial Design of New Palette and Usability Testing
- I worked with the committee to usability test the initial proposal of blue and orange.
- We found that having dark and light versions of two colors was not enough contrast to understand metrics.
- As a committee, we decided to use a four color palette, and the HR and marketing people suggested those colors come from the default MS Word palette as their coworkers should easily be able to pick colors for their reports.
- We continued to use a blue and orange that were close to the brand colors and added a yellow and teal color. Later, I was asked to create a palette with a darker yellow because the default yellow was too difficult to see on charts.
- I went through the same effort to test this new palette for red-green color blindness. The revised palette was tested using Figma and Adobe tools to simulate its application across the system. These simulations allowed me to visualize how the updated colors would work in real-world scenarios, ensuring that the changes would be effective in practice. The process involved:
- Contrast and Usability Testing: Each color combination was rigorously tested to ensure it met WCAG contrast requirements. Simulations in Figma and Adobe tools allowed us to see how the colors would function across different screens and components of the platform.
- Iterative Feedback: The revised palette was iteratively tested with both color-blind users and executives to gather comprehensive feedback. This ensured the final palette was not only accessible but also aligned with the brand’s visual identity.
- The final palette was presented to the executive committee and they approved it. An announcement went out and departments and products were supposed to have the new palette implemented within a year.
Executive Approvals and Communicating the Updates
The executive team member took this final palette and the examples to a meeting with the executive leadership team. They approved it and planned to implement this new, accessible palette across Intermountain Health. In their announcement, they decided that it would take a year to implement the new palette in performance metrics.
The marketing and communication team member was asked to create a slide deck and one-page presentation about the change and why it was implemented. They also published an announcement on the Intranet, highlighting the contribution that I made. These documents used the graphics that I made in Figma. For example, I took a current graph in the red and green palette, and I applied the new palette. I then tested the colors for Deuteranopia on Figma. The color and luminance difference are still clear with the new palette.
A few months after the new palette started to show on Intermountain's metrics and reports, I started getting phone calls and Teams messages thanking me for the improvement. These people all said that they are color blind and could not understand the metrics before the change.