Skip Navigation
SAI Sites

Your Visual Brand and Accessibility

Brand Accessibility

If there is one thing we can’t talk enough about it’s accessibility. A majority of accessibility lawsuits are in relation to websites being inaccessible for people with vision impairment or blindness with other impairments like hearing close behind. Accessibility is not buzz word, it’s a critical part of every website project we embark on from research to design to development to launch.

When we talk about accessibility, we’re referring to the need to make sure that everyone can use and access information on a website, including people who are blind or who have low vision, people who have physical disabilities that prevent them from using a mouse, people with cognitive disabilities, and many other groups that are in situations that affect how they use the web. The most widely accepted set of accessibility standards is the Web Content Accessibility Guidelines (WCAG). Although it is not a law, it is the standard of choice for many organizations and institutions, and it’s influencing upcoming revisions to important federal laws like Section 508 and the Americans With Disabilities Act (ADA). To learn more about the guidelines and best practices for implementation, please download our Accessibility Toolkit.

As such a critical part of our projects, accessibility is one of the first things we evaluate with new clients and it begins by looking at the visual components of their brand. These pieces include logos, color palette, typography and design elements such as icons and background patterns. Although it’s ideal to go through a website redesign in coordination with a brand refresh, this isn’t often the case. Typically, our clients come to us following a brand overhaul with a goal of bringing this new brand to life online, or they have an established brand identity that they do not have interest (or available budget) to change at this point in time. In either case, we will evaluate the colors, fonts and design elements to determine if any refinements are needed to create a digitally accessible set of styles. For example, we may need to adjust the tonal values of darker colors to ensure that those chosen for screen use pass WCAG contrast guidelines when used as text on a light or white-colored background. We’ll go into more detail about this process below. Ultimately, it is our responsibility to work with the brand elements currently in place to create a digital style guide that maintains the overall integrity of the organization’s brand while ensuring the final website is fully accessible for all members of the audience.

The two key visual aspects of the brand that impact accessibility are color and type. In part one of this two part series we are going to address color.

We Don’t All See the World the Same Way

One of the foundations of WCAG is the need to ensure that your site meets color contrast requirements for people who are blind, who have low vision, or who are color blind. People who are blind or who have very low vision will likely access your site using a screen reader, which is an adaptive technology that reads the content and information on the screen and aids people navigating a website with a keyboard. There are many important accessibility guidelines for designing and developing for screen readers (download our Accessibility Toolkit for an in-depth look at how to meet these guidelines).

People with milder low vision and people who are color blind typically do not rely on screen readers. For this group, the use of colors on the site can significantly impact their experience and ease of usability. Globally, 1 in 12 men and 1 in 200 women are affected by a color vision deficiency making this an important audience to take into consideration*. (http://www.colourblindawareness.org/colour-blindness/) There are multiple variations of color blindness that are categorized based on an individuals’ visual sensitivity to red, green and blue light.

color blindness test
Images from Ishihara color plate tests – depending on a user’s vision, different people will see different numbers or no numbers at all.

To best understand this, think of someone viewing your site through a color filter rather simply seeing it in black and white. Tools such as the Colorblind Web Page Filter help demonstrate this by allowing you to view your site through different pre-defined filters to truly get a sense of how a colorblind user would see things. Ultimately, just viewing your site in greyscale will help quickly identify the greatest challenges for accessibility.

web page filter test results
A portion of our website filtered for Protanopla (red/green color blindness)

Color contrast is also important for individuals who have low or clouded vision from cataracts and other degenerative conditions. But keep in mind that even users with 20/20 vision can experience contrast challenges when viewing your site on a low-resolution monitor, a small, handheld screen or a mobile device hit with sun glare.

Designing for Contrast

The first step in beginning to build an accessible brand design is analyzing the colors in the current palette and identifying which colors work over a white background, which work as dark backgrounds with white text reversed out of them and which colors can be combined (light over dark/dark over light) and successfully pass for WCAG Level AA contrast.

To do this we use accessibility tools such as WebAIM’s Color Contrast Checker to evaluate hex values for different foreground colors over different background colors. The tool indicates whether or not different color combinations will pass Level AA and Level AAA for Normal Text (below 14pt, normal weight) and Large Text (above 14pt, larger and bolder weight).

As we evaluate the colors, we chart which combinations are accessible. This is an example from a recent project:

In this case, we began with the client’s existing brand colors in blue and green and strategically selected additional colors to expand the palette. In considering background color and button options, we were limited to the Brand Blue and black. We wanted to have a darker option available to us that would align with the brand colors but allow us to safely use reversed text or a lighter button color over top. To accommodate that we added a dark green. The lighter tints could be used selectively over the darker colors and also pass WCAG. It should be noted that in this example we were testing all of the color combinations for normal text but certain color combinations could pass at the large text level. Those use cases would be the exception, not the rule.

From this point we move into developing color concepts for the design elements including callouts and button styles, that become the foundation of our mood boards, the initial view of the proposed design styles for the site.

There are many cases in which we’re given an established brand guide and quickly identify challenges that come with digital design versus print. A recent client came to us with refreshed brand guidelines, including a new color palette. However, there were key uses of the color palette described in the brand that did not meet color contrast guidelines. We worked with them to adjust their color palette before the new brand guidelines were finalized so that the intended use of the brand colors never resulted in color contrast issues.

Exploration of Existing Brand Colors and Making them Accessible
Evaluation and recommended changes for a client’s new brand color palette

Incorporating Photography & Patterns

Beyond solid backgrounds, many of our sites incorporate photography, video, gradient or patterned backgrounds. This is a contrast area that can’t be overlooked. Just as with a solid background color, we need to ensure that any text or usability elements positioned over these pieces contrasts from what is beneath them.

Photography and video, particularly if the images will change on a regular basis or are moving, can be very challenging. Using color overlays or subtle CSS shadows behind text we can allow the client to have more flexibility with image selection while ensuring the appropriate contrast always appears.

A transparent fade and soft shadow behind the text ensure the text area maintains proper contrast over this video billboard.
A gradient overlay above a photograph helps darken the background to provide contrast
Here the background is filtered to black and white and faded while text is placed in solid-colored boxes over top.

As with imagery, patterned backgrounds pose their own challenges. Many clients incorporate pattern libraries in their brand guidelines which offer dynamic visual elements to work with to create a more unique feel on a page. However, depending on the design of the pattern, shapes and lines behind text can easily interfere and make both legibility and readability of that content difficult. When softened or faded, however, patterns can be used to enhance the overall design without risk of reducing accessibility.

Icons, Graphics & Animations

Several of the examples we have pointed to incorporate icons, arrows or animated infographic elements. As with text, it’s important to select colors for these items with contrast in mind. For accessibility under WCAG 2.0, text links must be identified by at least two changes in format which could include a change in color as well as an underline or an arrow, for example. Should you use an element such as an arrow, that arrow icon must meet contrast guidelines just as the text does. In other words, using a light gray arrow that doesn’t meet required contrast ratios reduces the accessibility of the link it is associated with. Thus, in building an icon library to use on the site that reflects the overall look and feel of the brand, the style should be carefully considered to ensure they are as legible as the text that is used, particularly at small sizes, and used in colors that meet contrast requirements.

Thus, in building an icon library to use on the site that reflects the overall look and feel of the brand, the style should be carefully considered to ensure they are as legible as the text that is used, particularly at small sizes, and used in colors that meet contrast requirements.

This is equally true when designing infographics. Elements that you include such as icons, animated data components and illustrations should be designed with brand colors and the same contrast considerations you use elsewhere on the site. The rule of thumb is that anytime information is being communicated solely through an icon or graphic, that visual should meet color contrast requirements.

While we’ve focused exclusively on brand colors up to this point, the other variable to visually accessible content is, of course, typography. Look for that in our part 2 of this series. Also be sure to download our Accessibility Toolkit if you are interested in learning more about how to make your site more accessible.

Key Takeaways:

  1. If you have an existing brand, consider updating it for digital accessibility by reviewing brand colors and ensuring that the intended use of color meets the guidelines for color contrast.

  2. If you are considering a brand refresh or designing a new brand, make sure you choose colors that meet contrast guidelines from the beginning; you will save yourself a lot of time and trouble down the road.

  3. When putting together a style guide, follow guidelines for links so they are indicated through more than just color (e.g. using color plus a visual cue like underlining or an icon).

  4. Identify icons and graphics that communicate meaning or functionality to determine if they need to meet color contrast guidelines.

  5. Establish styles and conventions for putting text over images that use background, gradients, and other visual techniques to increase contrast.

Are you interested in learning more about creating websites that are both beautiful and accessible?

Contact SAI Digital today!

Get the latest insights.

It's better than your average e-newsletter...we promise. Sign up to start receiving the latest trends in web strategy.

 

By signing up for our updates, you are agreeing to our terms of use & privacy policy.