Increasing your
consumer base:

The importance of an ADA-compliant website

One of the best things you can do for your brand is to create a website that meets the standards of accessibility.

Not only will it increase the size of your potential target audience, thereby providing a business benefit, but it will also reinforce the importance of diversity by illustrating a concrete commitment to those ideals.

But it’s easier said than done. Creating a website that speaks to your brand while maximizing accessibility is a complex balancing act. But with a team of expert visual designers, we’re ready to help. We’ll create an ADA-compliant website that strategically aligns with your branding, leaving your brand with one of its greatest assets.

Person sitting cross-legged while using a laptop

The importance of an ADA‑compliant website

According to the CDC, more than 1 in 4 adults in the United States is living with a disability. That number includes a wide variety of the type and severity of disabilities. However, by taking a closer look, we can see that nearly 5% of American adults are living with blindness or have serious difficulty seeing. In truth, living with a disability can impact the way someone interacts with a brand in several ways. At its core, a brand is a relationship, after all. And a good relationship creates memorable experiences—experiences that include things like sights, sounds, sensations, and mental stimulation.

In particular, sight is an essential component of visual branding, which brings us back to that 5%. 5% of the total population may face significant obstacles in experiencing your visual brand, and that estimate may be conservative. In addition to people with low or no vision, others have a color deficiency, also known as color blindness.

Curved rows of color swatches displaying a full spectrum of color

Balancing ADA standards with your brand

Fortunately, the use of color and how it is experienced by people with low vision can be subjectively measured. This means that, as brand designers, we can actually plan for these challenges and incorporate them into our creative process to create an ADA-compliant website. Thus, we’re able to develop brands that are both aesthetically pleasing and inclusive of those who may struggle to see color in the way many of us take for granted.

The standard for how we measure the use of color on websites is set by the Web Content Accessibility Guidelines (WCAG) which documents how to make web content more accessible to people with disabilities. In terms of visual branding and color, the guidelines are primarily based on the contrast of brightness between two different colors. This ratio ranges from 1:1 (white text on a white field, for example) to 21:1 (black text on a white field, or vice versa) and is measured by the hexadecimal codes assigned to any given color (if you’re working with Pantone swatches, these hexadecimal codes are available for each swatch via Pantone Connect). Some color combinations, like black versus white, are obvious in their contrast, but many others may not be. In fact, most color combinations you’re likely to find within a given brand color palette will fall well below the midpoint of that range.

Taking a closer look at the WCAG standards and how they’re measured, we can see that multiple levels or “grades” can be reached. Ideally, your website will reach WCAG’s AAA level, meaning that all text and interactive elements can be easily seen and read by users with low vision or color deficiency. Reaching the AAA level may not always be possible for all elements; if that’s the case for your brand, it’s still recommended that you reach the AA level to maximize the accessibility of your website. Whether you’re speaking to customers, business partners, or investors, your audience will inevitably include people with low vision or color deficiency, and you don’t want to exclude them by ignoring a simple and measurable metric.

Measuring the accessibility of your website

To measure the visual accessibility of your website, there are several different resources that offer tools that align with WCAG standards. Within these, you’ll be able to easily view how various color combinations from your brand’s color palette match up against both the AA and AAA levels. Additionally, these tools can provide a more detailed breakdown between normal text, large text, graphical objects, and user interface components (such as buttons or other navigational elements).

The earlier you can bring these tools into the process of developing a brand color palette, the better. To help measure the visible accessibility of your color palette, consider creating a detailed breakdown of the potential color combinations you want to use for your website.

Below, the color compliance chart pulls in Addison Whitney’s color palette and breaks down how various combinations stack up to the standards of accessibility. The left side provides a pass/fail for text sizes against our primary, secondary, and tertiary colors. The right side depicts the contrast between potential foreground and background combinations. Always having a chart like this on hand places accessibility at the forefront of your mind to ensure an ADA-compliant website.

Color accessibility chart based on foreground and background colors

Optimizing your website for accessibility

Once you have this information in place and readily available for your team, decisions can be made. If your brand color palette already features a healthy number of high-contrast color combinations, congratulations! You’re good to go and can begin building an ADA-compliant website. If not, there are several potential solutions:

Perhaps the simplest solution is to leave your color palette unchanged, keeping it exactly as is. The tradeoff is that you’ll need to narrow down the number of color combinations you’re willing to use (this assumes that you have at least one color combination that is considered high contrast).

A second option is to shift some of your existing colors or add new colors to your palette. Working with the available tools to measure WCAG standards, this approach will allow you to identify a wider range of acceptable color combinations, providing more flexibility and versatility as you build your website. The downside is that aligning a larger number of colors to WCAG standards may not provide the exact aesthetic qualities you want your brand to exude.

A third choice is to split the difference, so to speak, by adjusting the colors used within your website without changing the core brand color palette. The appeal of this approach is that it allows you to potentially maintain the aesthetics of your existing logo or other marketing collateral while aligning your website with WCAG standards. The obvious drawback to this approach is inconsistency. For example, audiences may notice the difference in color between your logo and your website. However, it will create an extra layer of quality control and brand maintenance.

Again, this is a complex balancing act.

Whether you’re starting from scratch without a color palette or need help translating your preexisting palette into an accessible website, we’re equipped for it all.

Visual market research

Consumers decide in seconds. Learn how visual research uncovers the cues that stop them in their tracks.

Navigating medication safety

Medication errors cost billions. See how smarter naming helps protect patients and your brand.

Building a brand ecosystem

Your brand shouldn’t live in silos. With the right system, every touchpoint becomes a driver of momentum.

Back to all insights Read next insight

Ready to make your mark?

You have the vision. We have the expertise to make it real. From pharmaceuticals to technology and consumer goods, we’ve created some of the world’s most recognizable and iconic brands.

Let’s awaken your brand together.

Increasing yourconsumer base: