As we conduct more and more of our lives online, many of us rely heavily on visual cues when using websites. Often, web designers accommodate this by using color as the only way to communicate information to the user. When we fill out a form incorrectly, our mistakes are marked in red. When our friends log on to chat, green circles appear beside their names.

This may seem like a good approach to keep a minimalistic design with few visual cues, but in practice, the opposite tends to be true: The page becomes less user-friendly to most users, and absolutely unusable to those who are color blind. This can have a direct impact on your business, considering that 1 in 12 men and 1 in 200 women have some form of color blindness, amounting to 4% of the world's population.

First off, let's be clear: no one comes to our sites disabled. They may come with impairments, but we disable them when we put barriers in their way. Unless we like driving potential customers away, we should ensure that our products match the abilities of our users, not the other way around. Let's look at some ways to ensure that we enable our users.

Don’t communicate using color alone

Using color as a means to communicate is not in itself a bad idea. For some users, interpreting colors is the fastest way to perceive visual information. Other users, however, are left out when taking this approach, so the general rule of thumb is to have some other indicator than color alone.

Luckily, there are plenty of other ways to visually differentiate between components on the web. Consider using some of the following in your designs:

  • Patterns
  • Fill
  • Sizing
  • Borders
  • Icons
  • Whitespace

 

In the examples shown here, the visual components are all considered accessible, whether you add colors or not - because color is not the only distinguishing factor.

Here, we have gathered a few real-life examples of companies getting this right.

Example: Trello

The Trello project management tool relies on color a lot. To get around this, they have added a setting called "Colorblind friendly mode." This adds unique patterns to all project colors, making each stand out with or without color blindness.


A Trello board with colorblind friendly mode turned off.


A Trello board with colorblind friendly mode turned on.

Example: Spotify

The music app Spotify uses white clickable icons, but applies a shade of green for those that are currently toggled. To better differentiate between the white and green button states, Spotify has added a green dot below the toggled icons.


Spotify uses visual communication in an accessible way without the need to toggle this behavior on or off.

Example: Slack

As an example of showing a user’s availability, let’s take a look at Slack, the popular communication app. When a person is online, their status is marked by a full green circle next to their name. For offline users, this is only represented by an outline of a circle. Because the circular shapes are rendered differently, we don’t just rely on the colors used.


In the Slack app, online users are marked with a green circle, offline users are marked with just a circular outline.

Apply the Grayscale Test

In Siteimprove, whenever our designers are in doubt about using colors, we try to apply a technique called the Grayscale Test. The procedure is very easy to use: Simply take away all colors from your design or wireframe, rendering everything in grayscale. Can you still identify what the design is trying to communicate? Will an outside user also be able to?

 

Example of wireframes that work without colors.

Some designers are making it a habit to create their first draft completely in black and white. By doing so, they are not distracting themselves with the choice of colors, but focusing on the core structure instead. As a valuable bonus, they also avoid the headache of trying to account for color blindness at the end of the design process.

If we apply a grayscale filter to the three cases we looked at, it is clear that they still work and do not rely on specific colors.


Spotify uses dots below buttons to illustrate that they are activated. Trello uses patterns to distinguish between project colors. Slack uses a solid circle to represent a user being online versus a circular outline for offline users.

Our newest tool: The Accessibility Explorer

If you're not color blind, the ability to tell colors apart will make it difficult to identify these issues in your designs. At Siteimprove, we think it should be easier to make digital products inclusive, which is why we've added the Accessibility Explorer to our Accessibility product.

 

The Siteimprove Accessibility Page Report with different filtering options: Total color blindness. Red-green color blindness. Blue-yellow color blindness.

With the Accessibility Explorer, you can experience your website in different color spectrums based on types of color blindness. It also has an option to render the page entirely in grayscale, which resembles how some people with a more severe color blindness see the world. This new tool makes it easy for you to test your website and identify problems that affect many of your actual users.

 

The Siteimprove Accessibility Page Report using the red-green color blindness filter.

When you avoid relying on color alone, you make your site more usable for everyone. You give users more options for how to scan and interact with your content. You make your product work well for different cultures, where colors might symbolize different things. It also helps users who are working in direct sunlight, or who have enabled warmer screen colors at night, which often causes colors to become less distinguishable.

We believe that good design happens when you view it from many different perspectives - and everyone benefits from good design.

Learn more about web accessibility  

About 20% of web users have some type of disability that affects the way they use the internet. Not only that, but stricter accessibility legislation has gone into effect worldwide and the number of ADA compliance or Section 508 compliance related lawsuits has drastically increased.   

Ensure your brand is inclusive and approachable. Download our ultimate all-in-one digital accessibility ebook to get started.