Why we’re changing our colours

Zac Colley
Aug 21, 2018 · 3 min read

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

But how much contrast is enough?

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

How much contrast is enough?

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

Do you use tools for this? Let me know

Farewill’s colours

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 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

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! 🙌

Life at Farewill

Stories from and about the team at Farewill

Zac Colley

Written by

👥💞 Pushing for people first tech ⚙️🎨 Making stuff/creative coding 📝👨🏻‍💻 Developer at @Farewill

Life at Farewill

Stories from and about the team at Farewill