In this Best Practice of the Week (BPOW): always provide good color contrast on your web pages, as insufficient contrast can affect several types of users in many different scenarios. Specifically, improving the overall color contrast on your web site or application benefits users with color blindness, users with low vision, and users with mobile devices.
People and colour by the numbers
Did you know that about 8% of all men and 0.5% of all women suffer from colour vision deficiency (commonly referred to as colour blindness)? That’s almost 3 million people in Canada, over 26 million people in the United States, and over 610 million people worldwide. 99% of all colourblind people can see colours, but they perceive a much more narrow colour spectrum than individuals with normal colour vision.
According to the World Health Organization, approximately 246 million people have some form of low vision. Many users with limited vision depend on higher colour contrast to distinguish foreground text from the background colours on a web page. And, finally, about 96% of people worldwide use a mobile device. That’s a lot of people! If you’ve ever found yourself standing or sitting outside in the sunshine peering at a tiny mobile screen, you probably know firsthand how much a high contrast on those web pages can enhance your ability to read the text.
Measuring color contrast
There are three attributes that can mathematically determine colour contrast: hue, saturation, and luminance:
- hue: the colour (think about the colour wheel)
- saturation: the intensity of that colour (zero being neutral grey, 239 being the highest saturation for that color)
- luminance: lightness or brightness of that colour, the degree of reflected light
To calculate a sufficient minimum colour contrast, tools like Jonathan Snook’s colour contrast check analyzes hue + satuation + luminance to create a ratio of foreground color to background colour. The Web Content Accessibility Guidelines defines the minimum colour contrast ratio as follows to meet Level AA:
- 3:1: all text that is 14pt and bold (approximately 18px)
- 3:1: all text that is 18pt and larger (approximately 24px)
- 4.5:1: all text that is 14pt and not bold or smaller
Testing with users
While logos are excluded from minimum color contrast requirements, it’s important to think about the benefits of having your logo clearly visible to the widest group of people online. Consider testing your color choices using High Contrast Mode in Windows to ensure that any reversal of colors on the screen still provides a sufficient color contrast ratio.And finally, keep in mind that not all colour combinations behave the same way for everyone. Some colour combinations can cause issues for people with cognitive disabilities. For this reason, we encourage you to explore what works best with your company’s brand colours when defining any colour contrast above a 4.5:1 ratio and do your research with real people.