Colour system redesign: Island Health
Client: Island Health (Vancouver Island Health Authority)
Design problem: The former colour palette was a set of swatches and not a functional, accessible scalable or future proof colour system.
Key challenges: Perceptual inconsistencies, poor contrast ratios, and no support for colourblind people made it impossible to create an accessible designs. At the same time, preserving continuity with legacy materials in active use remained essential.
Design solution: Expand the Island Health palette into a scalable colour system using OKlab model to create perceptually uniform scales, improve accessibility, standardize naming, and maintain continuity with the original hues.
My role: Led the research, development, and implementation of a new colour system.
Collaborators: Stephen Mullally, Communications Designer — contributed to defining scales structure and accessibility testing.
Issues with the legacy palette
Legacy palette audit findings
✕ No accessible and future proof colour system
Most colours in the palette are stand-alone swatches without properly defined tints and shades. Variations of Island Health Blue are created by adjusting opacity, resulting in washed-out, perceptually inconsistent colours that feel disconnected from the base hue. Overall, the palette lacks the range and adaptability needed for a resilient design system across digital and print mediums and physical environments.
✕ No functional colours for health care needs
There are no clearly defined functional colors (e.g., success, error, warning, etc.). Core neutrals such as black and shades of gray are absent. The palette also does not support the practical needs of a health authority: it falls short in digital design, wayfinding, clinical alerts, and other contexts where color needs to perform a specific function.
✕ No clear structure or usage rules
The palette application was not mandatory, which led to inconsistent application across facilities and digital interfaces. There were no clear rules for how it should be used. Tints, shades, and base colours were mixed without a clear system, while naming and structure were inconsistent and did not communicate intended use.
new colour system*Interim names
Improvements in the new colour system
✓ Accessible and future-proof colour system
Each colour has an expandable set of variations with stable numeric lightness values in the OKlab (OKHSL) model. These values are reflected in variations’ name, so the naming will remain consistent if the system expands in the future.
The range of steps provides flexible options for contrast and accessible, WCAG-compliant combinations.
✓ Includes colour-blind friendly semantic colours
Semantic colours are clearly defined and intuitively named. The range of steps makes it easy to build colour-blind friendly sets for both light and dark modes while meeting WCAG AA contrast standards. System documentation governs how the colours are applied.
✓ Ensures continuity and seamless adoption
The revised colour values align closely with Island Health’s established identity, transitioning from the legacy swatches is seamless. This continuity is essential, as key applications like wayfinding are already deployed across dozens of facilities
The updated colour system maintains close visual alignment with the legacy Island Health colour palette. This supports continuity across existing materials and reduces disruption for instances where the existing colours are being used.
The only significant shift is in the legacy Aqua and Teal range, which has been adjusted to a Green that is distinguishable from red and orange in colourblind scenarios.
Overall, these refinements elevate visual accessibility across all touchpoints while also maintaining continuity with the existing colour palette.
The new colours look similar but perform much better.
Legacy swatches (left) vs. New variations (right)
The colour variations are now perceptually uniform.
By adopting the OKHSL colour space, the new colour system establishes perceptual uniformity in variations across every colour. This ensures that equal numerical changes produce equal visual changes across all colours.
For instance, Blue 40 provides the exact same perceived lightness and contrast as Green 40 or Orange 40. This makes WCAG accessibility predictable, removes manual guesswork when pairing colours, and allows for precise programmatic expansion across the entire system.
Legacy variations of Blue (left) vs. New perceptually uniform variations of Blue (right)
Vancouver Island is the unceded territory of many Indigenous Nations. Island Health operates on these lands and is committed to reconciliation, in alignment with provincial direction and organizational values. As part of this commitment, we are exploring ways to inform colour naming through Indigenous ways of seeing and relating to place. While primary colours like blue, green, orange, and red serve functional roles, other colours offer an opportunity to reflect this more meaningfully.
We are planning to engage with Indigenous voices to guide this work and ensure it reflects respect, relevance, and responsibility.
Naming is informed by sense of place and responsibility.
Visual references from survey participants, featuring plants, animals, and natural phenomena.
applicationA scalable colour system that supports care, communication, and access
From emergency signage to health education materials, visual communication plays a key role in helping patients navigate care safely and confidently. The new colour system is designed to support this experience ensuring information is clear, consistent, and accessible to everyone, including those with visual impairments or temporary or permanent disabilities.
The system is flexible and supports a wide range of applications, from digital interfaces to printed guides, across Island Health’s many teams and facilities. Its structure makes accessibility straightforward, while built-in contrast and naming conventions reduce the risk of misuse.
As care continues to evolve, so can this system. New variations can be added without disrupting visual coherence or accessibility standards. With space to reflect Indigenous ways of seeing, the system also holds the potential to better connect care to place, culture, and community.
Emergency Codes Response Guide
Hospitals use a standardized system of colour-coded alerts—known as emergency codes—to signal critical events like cardiac arrest (Code Blue), fire (Code Red), or evacuation (Code Green). When a code is called, staff must respond immediately, and their role-specific actions vary depending on the type of emergency.
The Emergency Codes Response Guide was designed to support this process. It clearly outlines the response steps for each code, helping staff navigate high-pressure situations with clarity and speed.
Built using the updated Island Health colour system, the guide ensures accessible, colourblind-friendly communication. Each code is paired with a distinct hue that remains legible across a range of visual abilities. High-contrast text and structured layouts further support fast recognition and ease of use. In a setting where delays can cost lives, this tool helps make emergency communication faster, clearer, and more inclusive.
Colour-coded Strategic Framework communication system
This colour-coded system was developed to support how Island Health communicates its strategic priorities across teams and departments. Built around the Quadruple Aim model — which focuses on improving patient and family experience, provider experience, population health, and system efficiency — the framework offers a visual structure for aligning work across the organization.
Designed for flexibility, this system can be used in multiple formats, including presentations, posters, and planning materials. It also allows teams to zoom in on specific elements of the strategic roadmap while maintaining a clear connection to the broader vision. This is achieved through consistent colour coding: each strategic pillar is represented by a dedicated colour used across headings, icons, and supporting visuals. When a particular pillar is in focus, its colour anchors it back to the full framework, reinforcing the sense of a unified system.
By combining typographic hierarchy with accessible colour combinations, the design ensures that strategic priorities are not only easier to understand and recall but also more inclusive and adaptable for a wide range of audiences and contexts.
