RESEARCH

Data Visualization Research

Creating Accessible, Data-Driven Color Solutions

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

Success Criteria

WCAG GUIDELINES

For each graphic that conveys important information:

Change the viewport width until the graphic is the smallest it can be at the default zoom level.
Check whether there is an input agnostic way of showing more information (e.g. pop-overs or enhanced contrast shown with mouse, touch or keyboard interaction), if so that graphic / graphical object can be skipped.
Check that each remaining graphical object has a contrast ratio of at least 3:1 with adjacent colors;
If the thickness of the graphical object or its adjacent color(s) is less than 3px wide & high, check it has a contrast ratio of 4.5:1.

ADDITIONAL REQUIREMENTS

Compatibility with all 8 types of colorblindness simulations, with an emphasis on grayscale.
Maintaining visual contrast between adjacent colors, even at zoomed-out scales.
Alignment with HPE's visual identity, ensuring both visual appeal and brand consistency.

Initial Proposal

PALETTE 1: ORIGINAL QUALITATIVE PALETTE

An initial qualitative color palette was proposed based on the first round of data visualization research.

COLORBLIND SIMULATION

Results: Testing revealed insufficient distinction between "qualitative-4" and "qualitative-5," especially under colorblind simulations.
Adjustments: To improve clarity, colors 5 and 6 were swapped to enhance the distinction between adjacent steps.

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.

WCAG COMPLIANCE

Testing revealed that 5 out of 7 colors failed to meet the 3:1 minimum contrast requirement against white and adjacent colors.

Adjustments: Non-compliant colors were darkened subtly to enhance contrast while preserving vibrancy.

Palette 2

ADJUSTMENTS

To address the adjacent contrast issues, each color in Palette 1 was adjusted while maintaining alignment with the original color range. This resulted in Palette 2.

COLORBLIND SIMULATION

Palette 3 demonstrated effective contrast across all simulations.

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.

Palette 3

ADJUSTMENTS

Following the feedback, a third iteration—Palette 3—was developed. Adjustments focused on darkening all colors to ensure a minimum 3:1 contrast against the background but not necessarily each adjacent colors.

Here we discovered that with an odd number of steps, it was not feasible to have both a minimum contrast of 3:1 against a white background and each adjacent color.

WCAG COMPLIANCE

Because the palette initially had an odd number of steps (7), it was not feasible to alternate consistently between light and dark colors while meeting both 3:1 contrast requirements against white and 3:1 contrast requirements for adjacent colors. This limitation necessitated the development of a palette with an even number of steps to balance accessibility and visual appeal effectively.

Palette 4

ADJUSTMENTS

Building on the insights from the first three palettes, Palette 4 was developed with a primary focus on meeting the minimum 3:1 contrast requirements against the background and between adjacent colors.

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.

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

Drawing on the insights from the previous palettes, I consulted with our head of design for guidance on aligning with brand standards. This collaboration encouraged me to move beyond the constraints of the existing color range, exploring options that were more cohesive and tonally aligned with the brand's identity.

WCAG COMPLIANCE

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

CHALLENGES

After presenting this palette to the broader design system team and receiving initial approval, several challenges emerged:

The ordered approach required colors to be used in a specific sequence. If not followed exactly as per the guidelines, it could jeopardize brand compliance.
The palette was only compatible with even numbers of data points, presenting a limitation when dealing with odd-numbered data sets, for which there was no solution.

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 (in the diagram below) 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 to this individual.
- 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.

Palette 6

ADJUSTMENTS

I began to re-evaluate the success criteria, as the current approach was proving to be restrictive and resulting in unappealing outcomes. To address this, we explored alternative methods, such as incorporating a high-contrast divider line, which I observed in several other design systems' data visualization color palettes.

UPDATED SUCCESS CRITERIA

3:1 contrast ratio requirements against white (#FFFFFF)
Brand compliance
Distinct individual colors

FINAL ADJUSTMENTS

For the final palette, I shifted focus away from trying to meet both adjacent and background contrast requirements. Instead, I prioritized brand compliance and ensured a minimum 3:1 contrast ratio against the background.

A high-contrast divider line was added to all instances.
A specific list of color combinations was created based on the number of data points to maintain brand compliance.

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:

Expand palettes to account for sequential and quantitative data visualizations.
Develop guidelines for label usage and other data visualization elements to improve accessibility.

F1 ANIMATION