Helen Bee from B Double E holding a laptop with an online colour contrast checker showing various colours.

Bringing colours to life: Your simple guide to inclusive branding and website design

Colour – it’s the magical bit of design that can bring your brand and website to life. It gives people an instant visual cue to who you are – and even how you do things. But not everyone experiences colour in the same way. That is where colour accessibility comes in.

Why is colour accessibility important?

Every ‘thing’ displays colour differently. Every screen – mobile, laptop and TV. Every book, leaflet, poster or piece of packaging. Even the exact same make and model mobile phone can display the same colour differently on 2 devices.

And it’s not just because colours appear differently on different things. Where we are when we see a colour also changes how things look. And colours change other colours when they’re next to each other too. A pale blue painted wall in a room with lots of windows will look very different if that same paint is used in a room with no windows. Put that same blue wall next to a bright yellow wall or a dark green wall and the blue will appear to change again.

Imagine having a fantastic story to tell, but some people can’t quite catch the plot because they can’t see certain colours. Colour accessibility ensures that your content is available for everyone, creating a more inclusive online space.

User-friendly experience

Have you ever struggled to read text on a website because the colours blended together? I see it all the time! Colour accessibility helps create a user-friendly experience by ensuring there’s enough contrast between text and background, making it easy on the eyes. You really don’t want to miss out on a client booking because they couldn’t see your contact details!

And it’s not just online that colour use is important. I’m coeliac (meaning I can’t have gluten) and the number of times I struggle to read food packaging for ingredients lists to see if there’s something that will make me ill if I eat it… well, it’s a lot! Here’s a rather perfect example of virtually impossible-to-read packaging…

Beer label - poor colour contrast.
Beer label with virtually impossible-to-read ingredients. Yellow on grey – NO! Yellow on dark brown – nice and clear!

Reaching a wider audience

When your designs are colour-accessible, it’s like turning the volume up on your messages. You’re not just speaking to those who see colours perfectly – you’re reaching a diverse audience, including those with colour blindness or vision impairments.

Good colour accessibility also contributes to your SEO ranking (how you show up in online search results) – the better it is, the more likely your website is to show higher up the list.

How humans perceive colour

How we see colour is all down to how our eyes and brain chat to each other. We humans have specialised cells (called cones) in our eyes that respond to different wavelengths of light. This creates a spectrum of colours, blending into the vibrant palette we see every day. Our rather amazing brains interpret these signals, allowing us to distinguish between the warm glow of a summer sunset over an ocean or the cool shades of a snow-covered field in winter.

Now, imagine this colourful canvas losing a few shades. Not quite the same is it?

Colour blindness affects approximately 1 in 12 men and 1 in 200 women of Northern European descent. It’s a condition more common than you might think – with most (but not all) struggling to see reds and greens.

As we age, the lens in our eyes often changes too which can also affect our ability to perceive certain colours and diminish the vibrancy of the visual spectrum. I never needed glasses until I hit my mid-40s. Being on-screen nearly all day for the past 20+ years has undoubtedly taken its toll! But I’m incredibly grateful that it’s clarity that seems to have worsened for me – not my ability to see colour. But the deterioration in clarity does impact how I see things on my mobile. Gone are the days of me being able to read tiny T&Cs copy in leaflets without issue or glasses!

Storytelling without words

Colour is not just a feast for the eyes; it’s a silent storyteller shaping our online experiences. The colours we choose for our branding, websites and social media have a profound impact on how users navigate and interact.

From guiding attention with bold stand-out buttons to conveying emotions, colours evoke feelings and influence our decision-making. However, it’s crucial to tread thoughtfully. Not everyone perceives or interprets colour the same way. Recognising this diversity helps us to create inclusive and enjoyable visual experiences for all.

Contrast – what is it and what does it do?

Let’s get a tiny bit more technical for a moment.

Think of contrast as the sidekick to colour. Contrast is what makes everything stand out. It is the difference between light and dark. The more contrast, the clearer the message.

Imagine reading a book where the words blend into the page. High contrast is like turning on a bright light, making text and images easily visible. On the other hand, low contrast is like reading in dim light – it might look cool in a photo, but it does strain the eyes. Remember that beer label example above – with poor contrast yellow on grey, and good contrast yellow on brown?

Good colour contrast is about finding the right balance between being visually attractive and ensuring accessibility – being beautiful and functional at the same time!

Choosing accessibility

The great thing about all of this is that we do have the ability to choose to make our designs easily accessible. Think of colour accessibility as your secret weapon – making your creations shine even brighter for everyone to enjoy! If you do it well, your designs will stand out far brighter from the competition too.

How do you know if you’re doing it well?

But I totally get it – it can all sound very confusing and overwhelming. And if you do have perfect 20:20 vision, how do you know if you’re doing this well or not? Well, thankfully there is lots of guidance

Picking your colours

Choosing your brand and website colours is not just about what looks fabulous. Psychology, competitor research, vibe and emotions all play a part.

I’ve written about it in a few blogs, so rather than regurgitate it here – I’ll pop some links to my blogs I think will help you the most…

  1. Branding colour psychology
  2. How to pick your perfect colour palette
  3. Colour palettes – everything you need for a beautiful voiceover brand

Picking your fonts

Typography is equally important to your brand and website. Fancy type with lots going on might look fun, but it can make your brand feel amateurish or make your website illegible. Equally, typograph has the power to make things look truly unique and stunning.

I’ve written about this before too – so if you want to dig deeper into the world of lettering, check out these links…

How to choose great fonts for your brand and website:

  1. Typography – part 1 – terminology, sourcing, legibility.
  2. Typography – part 2 – look and feel, how many fonts to use?
  3. Typography – part 3 – inspiration and suggestions.

Best practices for text colour and background contrast

Choosing the right text colour and background is like finding the flavour combination. You want them to complement each other gracefully. Dark text on a light background or vice versa is a classic combo – easy on the eyes and a breeze to read. Avoid the virtually impossible-to-see light grey on white or dark grey on black. And remember some colour combinations are the culinary equivalent of drinking fresh orange juice immediately after brushing your teeth. Yikes!

Tech and accessibility

Our content should look sharp on a big screen, a small screen, and everything in between. Keep font sizes friendly and don’t be shy with contrast. Responsive design (or mobile adaptive design) is like a chameleon – it adapts your website to different devices, ensuring your text stays legible whether it’s on a jumbo computer monitor or a pocket-sized smartphone.

Think of your text and colours as a dynamic duo of readability – make your content a joy to read, no matter where your audience is tuning in from! Remember over half of your visitors will see your website on a mobile, so make sure it looks good and is easy to read there too. (And be grateful the days of having to build a completely separate verison of your website for mobile are long gone!)

How to test accessibility?

Testing for your colours and type for accessibility on your website is like looking in the mirror before you leave the house and it ensures you’re making the oh-so-important right first impression! Testing the colour accessibility on your website is crucial to guarantee that everyone can enjoy your masterpiece and easily see the services you provide.

Thankfully, there are lots of free tools online that will help you. Hoorah!

Online guidelines

There are colour accessibility guidelines to help you. The Web Content Accessibility Guidelines (WCAG) cover loads about online accessibility (not just colour) but I think they feel very un-user friendly, cumbersome and off-putting.

But not to worry! There are some far easier-to-use free tools you can use too.
Here are a few that I use all the time…

Adobe Color

Adobe Color contrast analyser website page shown on an ipad.

A free, quick and simple tool to check one colour on top of another. Pop your text and background colours into this page, and you’ll get a pass, part pass or fail for small text, large text and graphics. The beauty of this tool is there are contrast sliders for each of your 2 colours, meaning you can slide them up and down until you get a colour combination that passes all 3.

Visit the Adobe Color contrast analyser website.

Accessible Brand Colors

Accessible brand colours web tool from useallfive shown on a laptop screen.

This free tool lets you check all your brand colours together and shows you which colours pass, part pass or fail when used on top of each other. You start with 2 colours and can add in more. You can’t change the colours like you can with Adobe Color, but this tool allows you to see every brand colour in one place making it a really quick reference tool for everything you design.

Visit the Accessible Brand Colors website.

Quick tips to make your designs accessible

  1. Maximum contrast makes things easier to read
    Black on white – white on black make things easy to see. But remember a pure white background on a screen can make eyes sleepy too! Try an off-white website background like our site that uses #FCFCFC – it’s much easier to look at for a long time, but most people don’t realise it’s not pure white.
  2. Left-aligned text is easier to read…
    …than central or right-aligned text (for languages that are Latin-based at least!). The centre-aligned copy might look nice on your website and social posts, but it’s much harder for people to read. Keep things left aligned, unless it’s a really short sentence.
  3. Squint to quickly check things
    If you can see text and images clearly when you scrunch your eyes together, chances are that your design has good contrast and is accessible.
  4. Hold your phone at arm’s length
    Another quick check is to look at things from a distance. Hold your phone as far away from you as possible when checking your website or social posts. Take a few steps back from your laptop.
  5. Use the 2 contrast checker tools I’ve mentioned above!

Go forth and become accessible!

Continuous improvements in technology are making more it easier than ever before to ensure our designs are accessible to all.

I love using colour – it really does bring me a whole heap of joy. It can and will make your brand and website stand out from the crowd. Your brand and website can be where colour not only captivates your clients but also communicates effectively. Use it wisely and you’ll be creating beautiful and accessible designs in no time. Let your colours shine!

Want some help getting your colour palette looking great and ensuring it’s accessible too? Helen’s on hand to help with website reviews, website design and brand design.