Accessible but never boring (Part 2)

Rebranding the Wise design system for everyone.

If you haven’t read Part 1 of this article yet, which focuses on colour, I suggest you start there. Here I’ll be focusing on type, icons, inputs, and focus states.

Let’s recap. Making your product accessible doesn’t mean you have to look like a boring bank or sacrifice your visual style.

Be bolder with less, and open to all: this was the challenge we set ourselves. And colour wasn’t the only place we made strides. Here’s what we learnt by refreshing our typography, icons, component set, and more.

Typography that breaks barriers

Our font sizes were already in decent shape, so we dug a little deeper for accessibility improvements to be had. That’s when we discovered an even bigger opportunity: turbocharging support for international languages. More languages equals more inclusivity. No brainer.

We noticed that the clean strokes of Inter paired well with our new less is more aesthetic. Its tall x-height is great for readability, and as it already supports 147 languages it felt like the perfect choice for Wise. And speaking of broader language support, our new display font, Wise Sans, also supports a whopping 342 languages.

An iconic makeover

Our icons needed some love. The old set was too detailed, which made it harder for users with vision impairments to see the iconography and understand its meaning. We were also keen to craft a crisper, simpler, more modern look.

We needed a style that would pair perfectly with our new typography. The aim of the game: to look fresh and improve readability. So, we honed in on solid clean lines, with higher contrast colours, and simpler metaphors that would resonate with a more diverse global audience.

Getting every individual icon right was painstaking, but worth it. Thankfully, the user testing came back with some great results. Not only did our new icon set elevate the brand visually, but it was easier to read too. Win, win.

Impactful inputs and libraries coming to life

With the foundations in place, it was time to start stress testing. We ran the new styles and assets through our component library in Figma and tested in code. Bringing everything together was perhaps the most nail biting step of the process. If the new styles didn’t gel, we were in danger of creating a Frankenstein’s monster. This had to be handled with care.

We zoomed out and meticulously refined our component set until everything felt unified. After that, things began to get exciting. You could really see the impact the changes were having.

Take inputs, for example. Inputs had an instant readability boost when we ran through our new, clean type styles and icons. Borders on text fields and checkboxes got much bolder and more visible with our high contrast colour palette. And we made sure that active states would stand out from the crowd with a strong 3px border in our signature Forest Green.

To lower cognitive load, we also removed clutter like unnecessary placeholder text and reduced the number of different colours used, not to mention increasing the padding to give everything room to breathe. And last but not least, we added better descriptions for screen readers (more on this topic later). Mixing all of these ingredients together made for a much more accessible library, not just a bolder brand.

Finding our focus

When refreshing a design system, you’ve gotta sweat the details — like focus states. These unsung heroes are essential for users who find it hard to use a mouse, or those who prefer a different method of navigation. They show you exactly which interactive element you’re on as you tab through the screen using a keyboard or assistive technology.

Top tip: never rely on the browser default styles for focus states. The default styles may not have enough contrast against your brand colours to be accessible, so it’s best to give them some design love.

The challenge for us was creating designs for focus states that would scale across all of our different surface themes, look good against our brand colours, and be highly visible for users — we didn’t just want to pass WCAG’s ‘focus appearance’ requirement, we wanted to obliterate it.

Through a whole heap of experimenting with different styles on our buttons and controls, we realised that for us it made sense to introduce a 2px offset between the component and the focus state border. This allowed us to reuse existing colour tokens for the border, while also keeping the border clearly visible no matter the surface theme or button type.

And on links, icons, and other interactive elements we surround the component with a solid 2px border — in our signature Forest Green of course, gotta keep it branded.

In both cases, the border thickness is double what’s needed to pass WCAG’s ‘focus appearance’ requirement, and on light theme, the contrast ratio is almost 14:1 — well beyond the 3:1 WCAG score.

Mixing all of these ingredients together made for a much more accessible library, not just a bolder brand.

Screenreader users, we’re here for you

It’s not just about the visuals. No brand refresh would be complete without improving spoken feedback for visually impaired users. So we invested time in user testing with blind customers, dogfooding screen reader software on our components, and auditing issues to fix.

I really can’t recommend doing these things enough. Without them, you’ll never get to a deeper understanding of how to design for screen reader users. For us, it brought home exactly how much the order and the quality of our spoken feedback could make or break a person’s experience.

The result? On Android, we made big improvements to our TalkBack support by adding better contextual descriptions to our components. And on iOS, every component in our design system now supports VoiceOver — aside from the odd edge case, like snackbars, which we deliberately handle differently to avoid interrupting users mid task.

A few closing thoughts

It’s been an intense year, and this brand refresh has taught us too many things to count. For me, one of the biggest takeaways is that focusing on accessibility can actually enhance your visual design, all because it forces you to be ruthless about celebrating simplicity. Who doesn’t love vibrant colours, clean lines, and design choices that give users space to breathe?

It’s also important to acknowledge that our journey is just beginning. Accessibility is a huge evolving discipline, so it’s never going to be one and done. There’s always more we can do to make our design system more inclusive. The main thing is to keep up the improvements and never lose focus.

Now that the brand refresh is live, our next steps are to commission a new audit by external accessibility experts to find out what else we can do to make things easier for users. We’ll also be adding more guidance to wise.design to help our product teams follow accessibility best practices. And we’ll be keeping a close eye on the latest trends as new thinking is always emerging.

So that’s it from us. Now it’s your turn.