Brightening up accessibility
with a new colour system
We recently revamped Deliveroo’s digital colour palette. It was our first step toward making our design system foundations more accessible. Building a good colour foundation takes time, but the effort is worth it. These support future improvements and help make our products more inclusive.
Why was it necessary for us to focus on colours? Colours play a major role in our digital products: they’re everywhere. Currently, our products are globally affected by poor colour contrast. We had to improve the colour contrast ratio to meet Level AA accessibility standards. This initiative will positively impact our design system and the markets we cater to.
The dark side of colours
1. Poor colour contrast
One of the top accessibility issues across platforms was the lack of colour contrast.
The colours that caused the most problems were bright teal, grey, red, green, and orange. We used these colours in our apps and products for text, icons, borders, and backgrounds. The widespread use of these colours worsened the accessibility issues we were facing.
2. Limited colour palette
The current colour palette came from Deliveroo’s rebrand in 2016. Unfortunately, the palette had several limitations. Only a few colours met level AA accessibility standards. Moreover, the palette had uneven visual weight, and we needed more tints for our product UI.
3. Decentralised colour foundation
This one’s a bit more technical. Our foundations don’t have a single source of truth; they have many (seven, to be precise). Having isolated colour definitions in design and code, including backend services, isn’t scalable. It’s also not easy to maintain and making changes is very time-consuming.
Fixing the foundations
Foundations are the core of Design Systems. They’re the visual attributes such as colour, type, spacing, elevation, and motion–to name a few. They propagate throughout the entire system and suite of products. How we approach them has a knock-on effect on disciplines, components, and processes.
The first goal was to create a new colour palette to help us be WCAG2.1 level AA compliant. Why? We needed a new set of colours and a better system to fix the palette limitations and the poor colour contrast.
Colour principles
- Accessibility. We designed the new colour palette with accessibility at heart. We have optimized our new base colours to meet AA-level standards.
- Vibrant and Balanced. Better visual weight in each colour without muddy or dull colours. We also expanded our range of colours by introducing a functional blue colour.
- Simple. We removed some colour duplicates to avoid confusion in usage. This gave us a more useful colour range as before we had two sets of orange-ish colours, reds and greys.
Tooling
We used Colorbox, a colour generation tool by Lyft’s design system team, to make our new colour palette. The tool uses an algorithm that programmatically generates colour sets. You need to enter hue, saturation, and luminosity values for every colour set. This lets you control how the colour progresses from light to dark. We had control, which meant we could also be flexible, as not all colours behave the same. No matter how much you try, you can’t ask a yellow to be blue (nerd wink).
This new and systematic approach is better for making vibrant and accessible colours. Previously, the colour palette used white or black to lighten or darken colours, which wasn’t ideal.
The new colour palette
We optimised our new colour palette for our digital products to meet accessibility. We didn’t change our beloved brand colour. We extended our colour range to ensure we had the right amount of steps to design accessible UI. The new palette has ten different colours, each with 11 luminosity levels, with tints and shades for each colour.
Our original brand colours had food names, very suiting for a company that loves food. We kept that naming convention and renamed some colours for consistency.
We established a scale from 0–100 for the luminosity, 0 being the closest to #000000 (black) and 100 being the closest to white. Each colour has a food name and a number indicating how dark or light they are.
Colour explorations in product
With the new colour palette ready, the next step was testing it! We explored three options and tested them in various parts of our products, including dark mode. We covered different product experiences that the design system supports, such as:
- Restaurant and grocery partners
- Riders
- Consumers
- Internal tools
We considered accessibility and our brand’s essence in each design approach. It was challenging because our action colour and brand colour were the same. We tested different approaches to change the action colour or keep it but tweak the usage for accessibility.
The images below show the three different colour approaches:
1. Seaweed
2. Dark seaweed with white text
3. Kelp with white text
Fine-tuning details
We selected the seaweed with dark text exploration as it’s closer to Deliveroo’s look and feel, with an accessible approach.
We collaborated with the principal designer and design leads to refine the selected approach. For primary actions, we went for a lighter tint for the background, paired with a darker shade of the same colour for the text on top. Text and icon elements on white backgrounds remained darker for accessibility.
A design language evolution
We worked with the design leads on evolving the design language of our product using the new colour foundation.
The design language was also tested in the wild by all designers in our team in a playground file. Each designer used the new palette in their respective product area. The design team provided simple guidelines on how to apply the new colours. This helped the designers test them, and we gathered feedback for future stages.
Bridging the brand and product experience
We worked closely with our Creative team on the selected approach for colour in product design. And great news: Deliveroo’s new brand identity uses the revamped colour palette.
Building this relationship and alignment was key to ensuring that the digital experience of our products was aligned with our brand experience.
Coming, colours in the air
Testing and socialising the colour palette was a key part of our process. Involving others in the process and showing them how it would affect our product and users helped with change management.
Socialising colour and accessibility
We made a point to over-communicate, share our progress and bring others along to make the new colour palette as successful as possible.
This involved sharing work in progress with product designers during design critiques. It helped them see how the work would look as UI elements and gather feedback. We presented the new colour palette to the tech organization highlighting its impact on accessibility.
Even our CEO highlighted the colour accessibility project in a company firm-wide. It was a significant achievement in awareness of the subject and getting recognition from the executive level in the company.
This helped everyone understand the importance of accessibility and why it matters.
Hello design tokens
Creating the colours was only the beginning of our journey. We used design tokens to implement the new colour palette in the product. A design token consists of a name and a value.
For example: color.background.critical = #DF1619
“Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools and technologies. They help establish a common vocabulary across organisations”.
Source: Design Tokens Community Group
Design token benefits
Design tokens help us to maintain and scale a consistent visual system for product development. Here are some key benefits of using design tokens at Deliveroo:
- Accessibility. Design tokens guarantee that the colour contrast needed for accessibility is met in all UI and components throughout the code.
- Scalability. By using tokens for design and development, all colour updates propagate consistently and systemically through our entire products and platforms.
- Flexibility. We can “reskin” our products quickly and easily. This is useful for brand refreshes and differentiation (for example, Deliveroo Plus), strategic partnerships, and dark and high-contrast modes.
- Shared language. Engineering and design speak the same language, which makes feature implementation and quality control less manual and more efficient.
- Conversion. Because of increased flexibility, we can run colour experiments from the backend to increase sales and task completion through improved usability.
The journey continues
With the new colour palette done, we needed to go one level deeper. Why? Up to this point, we were using the colours as they came from the new palette for the colour explorations in the product (tomato.40, anchovy.0, etc.). But names without meaning and usage context are difficult to remember and know how and where to use.
The following step in our process was working on alias tokens. They’ll help us manage the final and most difficult challenge– the decentralised state of our colour foundation. Design tokens will also support us in codifying design decisions with more meaningful names that imply usage.
In a follow-up blog post, we’ll cover how we created alias tokens. Stay tuned!
