There’s a lot of work that goes into brand development, especially choosing the right color palette.

Web accessibility is often seen as primarily the concern of web developers to write code that meets requirements. In reality, accessibility is a broad topic that encompasses all facets of the website creation process, from planning to launch.

One commonly overlooked accessibility consideration by brand identity designers is color contrast on screens. If you’re not considering web accessibility when choosing your brand colors, you might find that when it comes time to build your website, your color combinations don’t meet minimum accessibility requirements. This can be a costly mistake to fix after the fact, so it’s essential to understand color contrast and the role it plays in web accessibility when making brand color palette decisions.

Color contrast is essentially the difference in light, or luminance, between the foreground and background. It’s typically represented as a ratio of the relative brightness between two colors. These ratios make it easy to measure and evaluate color contrast.

Like most accessibility considerations, proper color contrast benefits all users to some extent, not just those with vision impairment. The more readable text is, the better experience users will have with your content. But for users with low vision or color deficiencies, proper color contrast doesn’t just provide a better experience—it’s essential for them to read or understand content at all.

It’s a common mistake to assume that your website doesn’t have enough users with low-vision or color deficiencies to warrant spending time and money to fix color contrast errors. However, a low-vision user could simply be an elderly individual, which makes it highly likely that contrast concerns apply to your website.

Issues with color contrast can be situational as well. A common example is the glare on a phone when outdoors or under bright light. In that scenario, higher contrasting elements will be much easier to make out for any user.

Pro-tip: Check out the NoCoffee Chrome browser extension to mimic vision problems on any website and gain a deeper understanding of why contrast is important.

Now that you have a better understanding of what color contrast is and why it’s crucial to website accessibility, let’s dive into some details about what guidelines to follow.

What guidelines should I follow for color contrast on the web?

The W3C’s Web Content Accessibility Guidelines (WCAG) are widely accepted standards for web accessibility requirements. The WCAG details color contrast recommendations for accessibility compliance.

The two primary WCAG criteria concerning color contrast that you should be familiar with are 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast. In this article, we’ll be specifically referencing the requirements for AA level compliance, which is the accepted standard for the majority of websites. Still, it’s worth noting that there are particular requirements if you are aiming for AAA compliance.

Note: You should always consult your company’s legal counsel to answer any specific questions and determine the exact requirements for your website.

1.4.3 Contrast (Minimum)

This criterion specifies that the text should have a contrast ratio of 4.5:1. According to the WCAG:

“The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is commonly reported as typical visual acuity of elders at roughly age 80.”

The 4.5:1 ratio applies to the majority of text on a website and should be used to select a primary color for body copy. There are some exceptions where the ratio changes:

  • Text that is at least 18pt large or 14pt large and bolded only requires a ratio of 3:1 since it can be more easily read with lower contrast. Keep in mind that text on the web is more commonly measured in pixels, which are not the same as points. In this case, 18pt translates to 24px and 14pt translates to roughly 18.5px.
  • Inactive elements, decorative text in images where no information is conveyed, and logos do not have to meet a contrast requirement.

Note that if the text is placed overtop a background image or gradient, it still must meet contrast requirements. This can be more difficult to assess the ratio between colors, but to be safe, you can choose a color where the image or gradient has the lowest contrast with the overlaying text as the background color to measure against.

It’s highly recommended checking out the 1.4.3 Contrast (Minimum) specification for full details on meeting this requirement.

1.4.11 Non-text Contrast

This criterion is new with the latest release of WCAG, version 2.1. It states that user interface components and graphical objects require a color contrast ratio of 3:1 when compared to adjacent colors.

User interface components are controls that a user needs to understand or use an interface. For example, a checkbox on a form would fall within this category and must have sufficient contrast with the background color to pass this criterion.

Graphical objects refer to standalone icons or graphics that are required for understanding content. For example, a linked icon that has no text associated with it must meet the 3:1 color contrast ratio since a user must be able to identify the image to understand what will happen when it’s clicked.

Read through the full 1.3.11 Non-text Contrast specification for additional details on this requirement.

How do I choose accessible brand colors?

It can be challenging at first to understand the various color contrast requirements and how they work with a website design. Most likely, it will take some trial and error as you learn what color combinations achieve the best balance between accessibility and aesthetics.

Luckily, there are a lot of tools out there that will help you choose contrasting colors that will meet WCAG requirements. Here are some helpful resources:

  • NoCoffee Vision Simulator: A Chrome browser extension that overlays websites within your browser with settings that mimic various low-vision scenarios.
  • eightshapes Contrast Grid: A useful tool lets you create custom color grids to show which color combinations pass WCAG requirements. It’s especially helpful during the web design process when choosing color combinations for user interface elements.
  • WebAIM Contrast Checker: A simple contrast checker tool to compare two colors and determine which WCAG requirements they met.
  • WAVE Browser Extension: Another browser extension that loads accessibility assessments for the current website you’re browsing, including color contrast information.
  • Color Safe: Use this tool to help with building an accessible brand color palette.
  • Colorable: Another color contrast checker, but with sliding controls for hue, saturation, and lightness to aid in adjusting colors to the right contrast ratio.
  • Accessible Color Generator: A color generator that will show you the closest accessible combination of two colors.
  • Tanaguru Contrast Finder: A color generator that can give you a range of color combinations to help you find an accessible mix of two colors.

In addition to developing your toolset, here are some other helpful tips when creating your brand’s digital color palette:

  • When choosing brand colors, consider how colors will be used on your website to help guide your choices from the beginning.
  • Provide enough variety of approved color combinations to use across digital content. If you only have two brand colors, it will be more challenging to create contrast between elements on your website without reaching for colors outside the brand.
  • If you’re working with an existing brand where the colors don’t meet contrast requirements, that doesn’t necessarily mean you need to rebrand. Try creating web-specific color variations of your color palette instead.
  • Don’t assume that color contrast requirements are met just because the text seems readable. Use tools such as those listed above to confirm colors are meeting the appropriate ratios.
  • Loop in an experienced web developer or accessibility professional if needed to help guide choices and confirm requirements if you are unsure what colors meet the criteria.