Color is one of the ways that you, as a designer, can connect with the emotions of users and draw attention to certain parts of a design. But when you design a product, it’s important to think about how color is interpreted by all users of the product. Some users will have difficulty perceiving certain colors or color combinations, so the information that the colors of your design convey could be lost. It’s critical that your designs are inclusive and reflect the diverse needs of the product’s users. Plus, designing with accessibility in mind makes it easier for all users to interact with your designs.

There are many resources to help designers use color in ways that are accessible to a wide range of people. For example, W3C recognized the need for improving accessibility for people with disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. So, they developed the Web Content Accessibility Guidelines (WCAG), which are a series of guidelines for improving web accessibility.

How can you use the WCAG in your own designs? Let’s explore.

Color blindness

Color blindness results in difficulty distinguishing between certain colors. There are three common categories of color blindness: red-green, blue-yellow, and total color blindness. To understand how color blindness can affect how users see color, visit the Colblindor Color Blindness Simulator, where you can upload images and check them through various colorblind filters. 

There are a few ways to keep color accessibility in mind as you design: 

1. Use icons in designs, in addition to color. For example, check out the image below: if you’re designing a form and want to indicate that a field is missing text or formatted incorrectly, do not solely rely on turning incorrect text to the color red. You should also use a red exclamation point icon. The exclamation point icon will draw users’ attention to the form field with the color and the icon, so your designs will be clearer to more users.

Graphic comparison of two phone screens; on the left is an address entry form and the address appears to be mistyped.
On the right is the same form, and there is an exclamation mark red alert next to the address field, where the address is incorrect/incomplete and there is a warning message “Invalid address format”

2. Use patterns and texture to create contrast. Contrast is the difference between two or more elements in a design. Contrast is often created through black and white imagery, or the large size of header text versus the smaller size of body text. Imagine you’re creating a bar graph about user research using a client’s brand colors. To create contrast without relying on color alone, you can add subtle stripes to one column and dots to another, as shown in the image below. With contrasting patterns, in addition to color, the bars in the graph will be clearly differentiated for all users.

graphic comparing two phone apps. On the left, a bar graph that distinguishes bars based on color.
On the right, the bars on the graph are distinguished by color and texture (e.g. dots vs. lines)

3. Avoid color combinations that could be hard to distinguish from one another. Here are some color combinations that are often difficult for users who are color blind to differentiate between: 

  • Green & red
  • Green & brown
  • Blue & purple
  • Green & blue
  • Light green & yellow
  • Blue & gray
  • Green & gray
  • Green & black

Keep in mind: If you use green in your designs, that doesn’t mean you need to avoid red, brown, blue, and gray altogether. But because these colors can be hard to distinguish, it’s better to not put those colors directly next to each other, especially for critical information. In addition, you should create other forms of contrast, like adding written labels to differentiate important facts. Check out the image below to understand these best practices in action!

Graphic comparing two phone apps; on the left, poor contrast with green, blue and a grey background.
On the right is a higher contract version with blue and red graphics and a light background

The key takeaway here? Your designs should convey information in multiple ways beyond just a single color, such as using icons, patterns, textures, and easily distinguishable color combinations.

Low contrast sensitivity

People who have low contrast sensitivity experience objects as dim or unclear, which makes those objects more difficult for a person to identify. Many people experience low contrast sensitivity on a daily basis. For example, people who have a high visual acuity experience low contrast sensitivity when it’s dark and a digital screen is too bright, or when it’s bright and a digital screen is too dark. In addition, as people’s eyes get older, their contrast sensitivity naturally weakens.

One way that you can design with low contrast sensitivity in mind is to use the luminosity contrast ratio, which is a measurement of the contrast between the background and the text color used on top of that background. As a standard, the WCAG recommends that the luminosity contrast ratio of images and text meets a contrast ratio of at least 4.5 : 1.

What exactly does that mean for your designs? Check out these four examples of contrast ratios in action:

Four different contrast ratios from one of the lowest to one of the highest.
Four different contrast ratios from one of the lowest to the highest. Low contrast has a ratio of 2 : 1 Minimum contrast requirement has a ratio of 4.5 : 1 High contrast is 16 : 1 ratio. Maximum contrast, with a ratio of 21 : 1 The text that is shown reads: “Color contrast is important for users to distinguish various text and non-text elements. Higher contrast makes the imagery easier to see.”
  • Low contrast has a ratio of 2 : 1. As you can tell, the background color and text are difficult to read.
  • Minimum contrast has a ratio of 4.5 : 1. These background and text combinations are easier to read, even though they use light colors.
  • High contrast has a ratio of 16 :1. These designs are easy to read and use bolder colors for text that stand out on the backgrounds.  
  • Maximum contrast has a ratio of 21 : 1. For the most contrast in your designs, like these, use black and white only.

The video Colors with Good Contrast from W3 showcases how luminosity contrast ratio affects users on a daily basis, from navigating street signs to conversing with a loved one.

To check the contrast ratio for your designs, WebAIM provides a Contrast Checker tool where you input the hex codes of colors from your designs. If your contrast ratio doesn’t meet the standards outlined above, you can use the tool’s hue slider to adjust the colors and find new ones that meet the WCAG guidelines for accessible designs. 

Light sensitivity

Some users are just as sensitive to bright light and bright colors as they are to low contrast. Light sensitivity is the inability to tolerate light. Users who have light sensitivity might experience your designs with a dim screen. Or they might use the operating system of their device to choose between light mode, dark mode, and high contrast mode, as shown in the image below. It’s best to allow users to make these setting choices, so try designing your own light and dark modes of your own projects.

Graphic of display settings showing Light Mode, Dark Mode, and High Contrast Mode

Consider color 

As always, the goal of designing a great user experience is to make people’s lives simpler and better. By following a few guidelines and designing with accessibility in mind, you’ll create products that are useful and fully accessible.

  • Stuck on how you can apply WCAG to your design’s color palette? Here’s a Color palette generator by Color Safe that shows WCAG in action. 
  • Download the plugin Stark to run contrast checks on your designs directly in Figma, saving you time and improving your workflow. Check out their page on Figma Community: Stark – Figma.