BPOW: Color contrast by the numbers

By September 12th, 2013

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.

Users by the numbers

Did you know that about 8% of all men and 0.5% of all women suffer from color vision deficiency (commonly referred to as color 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 colorblind people can see colors, but they perceive a much more narrow color spectrum than individuals with normal color 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 color contrast to distinguish foreground text from the background colors 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 color contrast: hue, saturation, and luminance:

  • hue: the color (think about the color wheel)
  • saturation: the intensity of that color (zero being neutral grey, 239 being the highest saturation for that color)
  • luminance: lightness or brightness of that color, the degree of reflected light

To calculate a sufficient minimum color contrast, tools like Jonathan Snook’s colour contrast check analyzes hue + satuation + luminance to create a ratio of foreground color to background color. The Web Content Accessibility Guidelines defines the minimum color 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 users 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 color combinations behave the same way for all users. Some color combinations can cause issues for users with cognitive disabilities. For this reason, we encourage you to explore what works best with your company’s brand colors when defining any color contrast above a 4.5:1 ratio and do your research with real users.

Tagged with: