Colour study

Rebuilding colour for accessibility, consistency, and scalability

I redefined the colour foundations, evolving a print-focused palette into a scalable, accessible digital system. Through contrast testing, colour mapping, and accessibility audits, I refined the core palette to meet WCAG standards, ensuring legibility, consistency, and adaptability across all digital touchpoints.

Role

Product Designer

Timeline

1 month

Tools

Figma, WEBAIM

Problem

How might we evolve a print-based colour system into a scalable, accessible, and digitally optimized palette?

Outcome

The redesigned system created a WCAG-compliant palette, ensuring accessibility without compromising brand identity.

Step 1

Auditing

The first step in redefining the color system was a comprehensive audit. I reviewed all Figma files, consolidating scattered, unlinked colors from old and new design systems, across public and secure platforms, and within the brand guidelines. Hidden colors in the variable panel and undocumented colors used in production further contributed to inconsistencies. I also analyzed how colors were applied across screens, identifying discrepancies in hues, contrast ratios, and the balance of light to dark colors to create a cohesive, accessible, and scalable palette.

Step 2

Defining design principles

Before refining the colour system, I set three key principles to ensure consistency, scalability, and accessibility.

Accessibility: The new system must meet WCAG standards, ensuring all colours maintain at least a 4.5:1 contrast ratio for text readability and inclusive design.
Seamless Adoption: To minimize disruption, I aimed to align updated colours with existing ones, making subtle but effective refinements that improve usability without requiring a complete redesign.
Systematic Approach: The colour system should be objective and structured, with clear usage guidelines to reduce ambiguity and ensure consistency across public and secure platforms.

Step 3

Refining for consistency

Through testing, we found the colour steps were inconsistent, having been manually adjusted rather than systematically defined. To remove subjective bias, we used Lyft’s ColorBox to generate colours with consistent hue, saturation, and brightness. We ultimately chose the HSL system, adjusting only the lightness value for a scalable, objective framework that ensures consistency and eliminates debate.

Step 3

Standardizing naming conventions

Color naming was inconsistent across systems, with variations like "Almost Black" in one system and "Cool Black" in another. To create a clear and scalable structure, I standardized colour names using a numeric system, making it easier to compare and apply consistently. The final system includes 9 shades, ranging from 100 to 900, ensuring a logical progression across the palette.

Step 4

Colour tokens & semantic naming

To ensure scalability and consistency, we implemented a structured colour token system.

Defining Base Colours – Raw HEX values were assigned to global tokens (e.g., #DF0089 → lime/500).
Mapping Role-Based Tokens – Colours were then mapped to semantic tokens based on function (e.g., lime/500 → fill.button.primary).

Using semantic naming ensures that colours are applied by purpose rather than appearance, simplifying developer handoff, maintaining consistency, and allowing for easy future updates across all platforms.

Step 5

Mapping colours for light & dark mode

To support both light and dark mode, we mapped colours to adaptive tokens, ensuring a seamless transition between themes.

Establishing Mode-Specific Variants – Each semantic colour (e.g., fill.button.primary) was assigned a light and dark mode equivalent, allowing for consistent usability across different backgrounds.
Contrast & Accessibility Testing – Colours were tested against WCAG contrast standards in both modes to maintain readability and hierarchy.
Ensuring Flexibility – The system allows for future expansion, enabling adjustments for branding updates or additional themes.

Step 6

Testing the colours

Once we established V1 of the colour system, I tested it by applying the new colours to existing Figma screens to validate usability and consistency. This helped identify any contrast issues, visual imbalances, or unexpected interactions with UI components.

Step 7

Developer handoff & implementation

To ensure a smooth implementation, I work closely with developers to integrate the new system. We establish design tokens for colour variables and map colours from 100 to 900, ensuring clear semantic applications (e.g., text, fills, strokes, status indicators).