top of page

RESEARCH

Data Visualization Research

Creating Accessible, Data-Driven Color Solutions

DataVis-Title.png

Project Overview

ABOUT

The aim of this project was to design an accessible and visually appealing data visualization color palette that adhered to the Hewlett-Packard Enterprise (HPE) brand standards while meeting stringent accessibility criteria, including compatibility with colorblindness simulations and WCAG (Web Content Accessibility Guidelines) requirements

YEAR

2024

MY ROLE

UX/UI Researcher

Success Criteria

PRIMARY SUCCESS CRITERIA

For each graphic that conveys important information: 

SECONDARY SUCCESS CRITERIA

  • Compatibility with all 8 types of colorblindness simulations, with an emphasis on grayscale.

  • Distinction between data-visualization colors and current status colors (red, green, yellow).

Initial Proposal

PALETTE 1: ORIGINAL QUALITATIVE PALETTE

An initial qualitative color palette was proposed based on the first round of data visualization research. However, testing revealed several issues:

  • Some colors did not meet WCAG contrast ratio requirements.

  • The palette lacked sufficient distinction for colorblind users.

Palette 1.png

COLORBLIND SIMULATION

We analyzed the palette by running it through various color blindness simulations. This process highlighted a lack of sufficient distinction between “qualitative-4” and “qualitative-5.” To improve clarity, we swapped colors 5 and 6, enhancing the differentiation between adjacent steps.

original - color blind test 1.png

ORDER ADJUSTMENTS

Swapping colors 5 and 6 improved adjacent contrast but introduced new challenges:

  • Without colorblind simulation, colors 4 and 6 appeared visually harsh when placed next to each other.

swap5&6 - color blind test.png

WCAG COMPLIANCE

Testing revealed that 5 out of the 7 existing colors did not satisfy the minimum contrast ratio of 3:1 when compared to white and neighboring colors. We reassessed the palette, focusing on darkening certain hues to improve contrast while maintaining vibrancy.

Palette1-Contrast.png

Palette 2

ADJUSTMENTS

Adjusted for better contrast between adjacent colors.

Palette 2.png

COLORBLIND SIMULATION

Palette 2 demonstrated effective contrast across all simulations.

Palette 2-ColorblindTest.png

WCAG COMPLIANCE

Adjacent colors achieved the required 3:1 contrast ratio. However, qualitative 2, 4, and 6 did not meet 3:1 contrast against a white background.

Palette2-contrast.png

Palette 3

ADJUSTMENTS

Following the feedback, a third iteration—Palette 3—was developed.

  • Focused on darkening all colors to meet contrast requirements.

  • Faced challenges due to an odd number of steps, making it difficult to balance contrast against both adjacent colors and a white background.

Palette 3.png

KEY FINDING

With an odd number of steps (7), it was not feasible to maintain both a minimum contrast of 3:1 against a white background and adjacent colors. This necessitated the development of a palette with an even number of steps to balance accessibility and visual appeal.

palette 3 contrast.png

Palette 4

ADJUSTMENTS

Developed to meet 3:1 contrast requirements against both the background and adjacent colors.

Palette 4.png

WCAG COMPLIANCE

This was the first palette to fully achieve color contrast accessibility. By introducing an eighth color, the palette successfully met a 3:1 contrast ratio against white and all adjacent colors.

palette 4 contrast.png

FINDINGS & FEEDBACK

Although fully accessible, this palette introduced other challenges—it appeared muddy, visually unappealing, and failed to align with the brand's aesthetic guidelines

Palette 5

ADJUSTMENTS

  • Refined based on prior insights.

  • Consulted with Head of Design to align with brand standards.

  • Moved beyond the constraints of the existing color range to explore options more cohesive with the brand.

Palette 5.png

WCAG COMPLIANCE

This palette fully met the 3:1 contrast ratio requirements against white and adjacent colors.

Contrast palette 5.png

CHALLENGES

After presenting this color palette to the larger design system team and obtaining initial approval, several challenges emerged:

  1. The structured approach required colors to be used in a specific sequence for brand compliance.

  2. This palette was designed only for even numbers of data points, limiting usability for odd-numbered datasets.

Palette5 In Context.png

ADDITIONAL TESTING

Additionally, I conducted user testing with an individual who has visual impairments, which limited his ability to distinguish colors from one another.

​

Findings:

  • Despite not fully meeting WCAG contrast compliance, Palette 2 was the most effective, followed closely by Palette 1.

    • These two palettes featured the most distinct colors, with a greater differentiation between them compared to the others.

  • Palettes 6 and 7 were the least accessible.

    • While he could perceive that there were different steps within these palettes, he struggled to distinguish them as separate colors, identifying them instead as varying shades.

​

With this new information, it became difficult to avoid status colors (red, green, and yellow) while still having 8 distinct colors that also met the 3:1 contrast requirement.

​

User Testing.png

Palette 6

ADJUSTMENTS

Given the restrictive nature of the initial success criteria, we explored alternative methods, including the use of high-contrast divider lines, as seen in other design systems' data visualization palettes.

Carbon Chart Examples.png

UPDATED SUCCESS CRITERIA

  • Minimum 3:1 contrast ratio requirements against white (#FFFFFF)

  • Brand compliance

  • Each color must be distinct and easily distinguishable.

Frame 1087742.png

FINAL ADJUSTMENTS

Instead of requiring adjacent colors to also meet contrast requirements, we prioritized:

  • Brand compliance.

  • A minimum 3:1 contrast ratio against the background.

  • Accessibility through high-contrast divider lines to enhance color distinction.

A structured set of color combinations was developed based on the number of data points to maintain brand consistency.

Revisiting Success Criteria

PRIMARY SUCCESS CRITERIA

For each graphic that conveys important information: 

  • Each graphical object must have a contrast ratio of at least 3:1 with a white background. ✅

  • Colors must remain clearly distinguishable: Even when viewed at the widest zoomed-out viewport, the colors in the graphic must maintain their distinct recognition from one another. ✅

  • The palette must align with HPE’s visual identity, ensuring both visual appeal and brand consistency. ✅

SECONDARY SUCCESS CRITERIA

  • Compatibility with all 8 types of colorblindness simulations, with an emphasis on grayscale. ✅

  • Distinction between data-visualization colors and current status colors (red, green, yellow).

    • ​Note: Given the limited options for colors that meet the 3:1 contrast ratio against white, it became challenging to avoid status colors (red, green, and yellow) while still maintaining eight distinct colors. This was the one success criteria we were unable to fully meet, as the constraints of the color wheel limited our options.

Key Takeaways & Future Directions

KEY LEARNINGS

  • Empathy is key to understanding and creating accessible experiences.

  • WCAG requirements are the minimum—hands-on testing with actual users is critical to identifying true accessibility needs.

NEXT STEPS:

  • Enhance Grommet capabilities to include high-contrast divider lines in all charts by default. This ensures accessibility regardless of color order and data values.

  • Expand the palette to account for sequential and quantitative data visualizations:

  • Sequential palettes (Hierarchical order: 1, 2, 3, 4, 5, 6)

  • Diverging palettes (Central point with positive and negative values: -3, -2, -1, 0, 1, 2, 3)

  • Develop guidelines for label usage and other data visualization elements to further improve accessibility.

Let's Connect! I'd love to get to know you! 👋🏾

  • Instagram
  • LinkedIn
bottom of page