Accessible but never boring
Rebranding the Wise design system for everyone (part 1).
3 circles showcasing accessible colour pairings.

We've split this article into two parts. This is part 1 — a deep dive into picking accessible colours. In part 2 I cover typography, icons, focus states, and more.

The Wise colours shown in dark mode.
The Wise home screen shown in dark mode.
The Wise home page shown in light mode.

There’s a misconception that making a product accessible means sacrificing the visual design. Your UI will look too plain, they say. Your branding too dry, or too ugly. But gone are the days when you had to look like a boring bank to build a product that can be used by all. It’s time to think bigger. Bold brands embrace accessibility.

At Wise, 1 in 3 of our Android customers use an accessibility setting. To work everywhere, we have to work for everyone. Zero compromises. The challenge we set ourselves when rebranding our design system — be bolder with less, and open to all.

Colour is at play on every element on every screen, and it’s often the first thing people notice about a product. So designing a new colour system was top of our priority list.

A collage of Wise brand assets.

Striking a vibrant and inclusive (pan)tone

Our goal was to create a colour system that isn’t just inspired by the world, but opens it up too. Each tint had to look good, and work hard (especially when applied to surfaces and typography, where it has a huge impact on readability).

Visibility was a must. So we set our sights on striking, high-contrast pairings that would pop in marketing campaigns and create clear hierarchies in product.

Our secret was to test, iterate, and repeat until every token on every theme passed the contrast requirements and worked in harmony. We learnt heaps along the way.

Bright Green
AAA
Bright Pink
AAA
Bright Orange
AAA
Bright Yellow
AAA
Bright Blue
AAA
Forest Green
AAA
Dark Maroon
AAA
Dark Purple
AAA
Dark Gold
AAA
Dark Charcoal
AAA

The deal with contrast ratios

To understand the required ratios we began where any self-respecting designer should: with the Web Content Accessibility Guidelines 2 (WCAG 2) (aka the mother of all accessibility standards). In lots of countries, you have to get at least an AA rating by law. While those who go above and beyond for users can achieve AAA.

Top tip — there are tons of tools you can use to check that your colour combos make the WCAG 2 grade. We like the Contrast Figma plugin, as well as WebAIM's contrast checker tool.

So far, so good. So what’s the problem?

Two colour contrasts, one which is accessible, and one which isn't.

WCAG vs APCA: a contrast conundrum

When we dug a little deeper into colour picking methods, we discovered that WCAG 2’s formula for calculating contrast ratios can sometimes be a bit simplistic, and doesn’t always reflect how people see — especially when backgrounds are darker than text. This can occasionally direct people to select colours that are hard to read.

Luckily, WCAG 3 is well underway, and there is a new, improved colour picking method in town. It’s called Advanced Perceptual Contrast Algorithm (APCA). Catchy, right? APCA isn’t required by law yet, but it is widely believed to be a more sophisticated tool for colour picking than WCAG 2. This is because it matches more closely how people perceive colours, and takes into account typography weight and styles.

So while we all wait for WCAG 3 to arrive, which method should we use — WCAG 2 or APCA?

A screen from the product labelled with the different colours and their accessibility scores.

Double the tests, double the success

Our approach was to test colours using both methods. If you care about getting colours right for visually impaired users, you should too.

We put our product colours through their paces by treating WCAG 2 as our baseline check, and the more nuanced APCA as our primary method for picking colours. Why all this extra effort? We had to be sure that our design system would open the world up, not shut people out.

Some of the colours before and after the rebrand with their accessibility scores.

Simulators are your friends

Colour accessibility isn’t all about maths. Sometimes you just need empathy. According to Colour Blind Awareness, there are approximately 300 million people with colour blindness worldwide. That’s almost the same number as the entire population of the USA. But as designers, it’s not always easy to put yourself in their shoes.

The app homescreen shown as they would look to people with different vision impairments.

Luckily, there’s a brilliant Figma plugin called Color Blind that does just that. We ran this simulator on our new colour set to see how each colour would appear to colour blind users, then weaved the adjusted shades through key product screens. This helped us to understand how well our new colours were working for the 8 most common types of colour blindness (spoiler alert, it’s not just grey scale).

Top tip — I’d recommend this low vision simulator too. It really helps you simplify designs and see where you need to up the contrast.

No more excuses

Finding colours that are accessible and meet your brand values is never without its challenges. Testing and refining every possible pairing across multiple themes takes a lot of work. Believe me, I know.

But it’s also not rocket science. Opening your product up to those who couldn’t previously use it is 100% attainable, and 100,000% worth it. We’d love to see more brands step up and embrace accessible colour palettes. All the guidance is out there. And yes, your product can still look great while you do it.

As for colour at Wise, we’re just getting started. We’ve got lots more work planned to enhance our theming capabilities and give designers even more freedom to be expressive with our palette. We’ll document all the guidance that we never had time to prioritise (you know how it is). And we’ll polish the finer details. Most importantly, we’ll never stop trying to include all users, even if we don’t get things perfect first time.