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:
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:
- contrast-ratio.com by Lea Verou
- Colour contrast tool by Jonathan Snook (my personal favourite)
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:
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:
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.
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! 🙌
