Why we’re changing our colours

We want Farewill to be accessible to as many people as possible. Breaking down barriers for people with disabilities is key to this.

I believe inclusive design makes better and more flexible products for everyone. In this post I’ll be focussing on a change that could help our blind and partially sighted users.

Colour contrast

A key part of visual design is colour contrast. Colour contrast is the visual difference between two colours. It can affect how easy text is to read.

But how much contrast is enough?

What is the minimum and what should we be aiming for?

How much contrast is enough?

There’s something called the Web Content Accessibility Guidelines (WCAG) that get published by the W3C. These guidelines include all sorts of information on how to make your website accessible to the most people.

One part of these guidelines is specifically about colours, colour contrast and the ratio you should aim for between foreground and background colours for text.

There are multiple levels of compliance to the guidelines, described with AA and AAA. The more A’s the better.

Based on WCAG 2.0 the minimum ratio is 4.5:1 for AA compliance and 7:1 for AAA compliance.

Below is an example of contrast ratios of colours with white:

Black with white is a ratio of 21:1. Grey with white is a ratio of 4:1. White with white is a ratio of 1:1.

For larger text it changes to allow for less contrast. The bigger or bolder text becomes the easier it is to read. For AA you need a ratio of 3:1 and for AAA you need a ratio of 4.5:1.

Tools to help

Their guidelines and formulas are quite confusing and to be honest I don’t even know how these colours are calculated. There are some tools to work this ratio out:

Do you use tools for this? Let me know

Farewill’s colours

We have two main colours for our user interface. Our primary colour, yellow, has great colour contrast with black:

Yellow (#3E487D) with black has a ratio of 18.3:1 which passes AA and AAA.

Our secondary colour is used a lot across the site. You can see a comparison of what we had before and what we changed to below:

Screenshots of the Farewill user interface. Left the colours before, right the colours changed

Is it better?

The original pink/red with 2.5:1 was not great for colour contrast, it’s under the minimum of 4.5:1 by quite a bit.

The new blue at 8.5:1 is far above passing the WCAG AA criteria at 4.5:1 and even better the AAA criteria at 7:1.

The pink (#FC7E84) with white has a ratio of 2.5:1 which fails AA and AAA. The blue (#3E487D) with white has a ratio of 8.5:1 which passes AA and AAA.

Colours are a complicated topic and contrast ratio shouldn’t be the only thing you consider. Shopify wrote up a great post on how some colours can often look more legible when the ratio is still low.

Making a product for as many people as possible

We’re trying to improve the accessibility of Farewill so it can be used by as many people as possible. This is one step towards that future.

From making the website keyboard accessible, all the way to making our wills legally binding for blind and partially sighted users, we have lots of exciting challenges to work on next.


Want to join us at Farewill? We’re hiring! 🙌
Like what you read? Give Zac Colley a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.