I think we can all agree that colours are an extremely important part of any app or website. They send the message about your brand and evoke emotions in people using your product. When used correctly, they are very powerful.
They also play an important role in helping the users use your product and making them feel welcome. Unfortunately, this aspect is often overlooked and it’s deemed a waste of time to care about accessibility.
I believe this is a big mistake. Making a product accessible helps everyone, regardless of their abilities and technical proficiency.
Let me tell you why:
On the surface, it might seem that high contrast between elements is only required for people with impaired vision and it’s not something to worry about in a general case. Besides being very dismissive of those people, it’s simply not true.
Even people with perfect eyesight will find it difficult to read text that doesn’t have good contrast against the background - they will still manage but it will require extra effort. Over time, this will create small frustrations which will make people dissatisfied with your product and they might eventually stop using it.
Besides, there are circumstances where each of us will find it difficult to read what’s on the screen. Have you ever tried using your phone on a sunny day or while wearing sunglasses? Even with the best eyesight in the world you’d still struggle, as the screen will not be as legible.
Usually, larger fonts and elements can get away with lower contrast. You should aim for at least 4.5:1 for regular text and 3:1 for large text (18 pt or 14 pt + bold).
On the flip side, contrast that is too high is also causing strain on the eyes and makes text difficult to read. Using pure black text on a pure white background is rarely going to work well. It’s all a matter of balancing things out to provide the best experience.
Indication of state
One of the most common mistakes in apps is only using colour to distinguish between states in the app. For example, green text when things went ok and red when there was an error. This might seem fine at first glance (especially when the colours pass the contrast test), but is very limiting for people who are colourblind - for them it might look like the same colour.
Also keep in mind that some colour combinations are culture-specific (similarly to symbols) and just because it’s obvious for you, it doesn’t mean it will be obvious for your users.
A good practice to help people understand what’s going on is always providing at least two distinct visual indications of what’s going on, such as a green checkmark and a red cross to show a success and error state respectively.
As I already mentioned, colours help convey the message you want to show to people. But this only works if they’re used in moderation. I’m sure a lot of you remember the websites from the 90s where everything was moving and changing colours and screaming for attention - it made those pages very difficult to navigate.
These days most apps and websites are much more minimalistic and there’s a good reason for that: when everything is important, nothing is. If every part of your screen is covered with intense colours and there’s little empty space, people will find it difficult to quickly get the information they are looking for.
This will in time discourage them from using your product because nobody has the time to scan a busy screen to find the button they need - or wait for the animations to finish for that matter.
To sum up
Using colours wisely goes beyond just expressing your brand identity. It has an influence on whether people will want to use your product or find it frustrating - as such, it should never be an afterthought, but a design consideration right from the start.
Helping your users use your product can only end well. After all, everyone has their shortcomings, regardless of whether they’re temporary (eg. because of the weather) or permanent. Keep it in mind in your next project!
This is just an introductory article about accessibility and why it’s important. In the future I’ll cover other aspects of it and how to make your apps inclusive for everyone - sign up to the newsletter to make sure you don’t miss anything!