When I was around 9 years old, I made a birthday cake for my dad. Nothing special, just a chocolate cake mix from the shops, with chocolate frosting, and a very wobbly ‘happy birthday dad’ squeezed onto the top using the Queen writing icing multipack. I alternated the letters with different colours from the pack: blue, red, yellow, and green. I thought it looked great, just a bit wonky.
My dad has Deuteranomaly, a form of red-green color blindness, and what I didn’t realise at the time was that he couldn’t actually read the whole message. After blowing out the candles, he said “thanks for the cake Catie, but I can only see half of the letters!”
This experience, though funny at the time, became a small lesson in how important colour contrast can be – not just in cake decorating, but in all design, especially web design. And when it comes to making your website accessible, colour contrast plays a crucial role in ensuring that everyone, regardless of their vision, can read and navigate your content with ease.
As a designer or business owner, it’s really important to make sure your website is accessible to all users, including those with visual impairments like colour blindness. According to Good Vision For Life, approximately 1 in 12 men and 1 in 200 women affected by some form of colour blindness worldwide, so it’s not a small issue by any means. If your website isn’t designed with accessibility in mind, you could be excluding a significant portion of visitors to your website.
Read on to learn about the importance of colour contrast in web design and how it impacts user experience, get practical tips on how to check and improve the colour contrast on your website, ensuring that your content is clear and readable for everyone. These simple tweaks can make a big difference in creating an inclusive online space.
Understanding colour contrast and how it affects web accessibility
Colour contrast doesn’t just affect people with colour blindness – it also affects people with other vision impairments such as low-vision or cataracts. Colour contrast refers to the difference in luminance between text and its background, making content easier to read. Poor contrast can make it difficult for individuals with visual impairments, like colour blindness, to read your content.
Online tools like the WebAIM Colour Contrast Checker or Colour Contrast Checker (which has a very nice interface) can be used to ensure your text meets the recommended contrast ratio (at least 4.5:1 for normal text and 3:1 for large text).
Colour blindness 101
There are 3 main types of colour blindness; Deuteranomaly, Protanopia, and Tritanopia. I’m sure you’ve probably seen those colour blindness tests pop up while you’re scrolling that ask “what do you see in this picture?” These show how different types of colour blindness can affect how we perceive images.
Here’s a quick breakdown of the most common types of colour blindness:
Deuteranomaly: The most common form of colour blindness, affecting how green appears. People with deuteranomaly may see greens as more red-toned, which can make it hard to distinguish between reds, greens, and browns.
Protanopia: A type of red-green colour blindness where reds appear dull or washed out. This can make warm-toned design elements — like red call-to-actions or error messages — hard to notice.
Tritanopia: A rarer form of colour blindness that affects blue-yellow perception. Individuals with tritanopia may struggle to differentiate between blues and greens, or yellows and pinks.
You don’t need to design for every specific visual impairment, but being aware of them can go a long way. Understanding how colour blindness and other vision differences affect users can help you make more inclusive choices such as avoiding similar colours for contrasting actions or categories.
A couple of ways to mitigate this include:
- Using high-contrast colour combinations
- Pairing icons with text to make meaning clearer
- Testing your designs with tools like Color Blind, a really handy Figma plugin that emulates your design based on the selected colour vision.
Making your website accessible for all
Accessibility is about creating a digital experience that works for everyone. This includes people with low vision, cognitive impairments, and users who may have age-related sight changes. Accessibility affects more people than we realise.
Start by incorporating strong design foundations:
- choose fonts that are legible (especially at smaller sizes)
- maintain a clear visual hierarchy
- make sure your site is easy to navigate with both a mouse and a keyboard
- use headings correctly
- avoid relying on colour alone to convey meaning
- ensure your buttons, links, and forms are clearly distinguishable
Even small changes — like increasing line height or adding descriptive alt text to images can make a big difference. These improvements benefit all users, not just those with accessibility needs. Better usability = better engagement.
Accessible design isn’t just good practice — it’s good business.
To sum it all up
Designing with colour contrast in mind is about creating a digital space that’s inclusive, welcoming, and easy to navigate for everyone. From that chocolate birthday cake to the websites we visit daily, how we use colour has a real impact.
By being mindful of colour contrast, testing your designs, and incorporating accessible practices into your process, you’re not just making your work more effective — you’re making it more human. And at the end of the day, that’s what good design is all about.
Handy resources
Learn more about website accessibility:
Check your brand colours in these colour contrast tools:
