Why Your Brand Standards Should Include a Contrast Guide

Jeremiah Bratton, Senior Front-End Developer

We, the people who work at Portent, have been pushing our clients to pay close attention to accessibility concerns. We know access affects their performance and their public image.

For us, most clients show up with a recipe for public image: their brand guidelines. When working with clients on accessibility concerns, these brand guidelines can present a familiar roadblock—proper color contrast. I am speaking as a developer/designer inside an agency that services clients, but this same issue can show up if you are an in-house employee with internal stakeholders.

Brand guidelines may dictate poorly-contrasted combinations; combinations designed to strike emotional chords with customers, look great on a bottle or billboard but leave users with visual impairments behind. It is also possible that someone else on the project wants to use a brand color combination that is not compliant and needs to be convinced to use a lighter, more neutral shade.

Color has a way of creating emotional arguments, and those arguments need to be settled with evidence. Practically and emotionally, color is different for everyone. I have found that the easiest way to move out of the emotional side of the argument is to provide some easily-glanced facts about how compliant one color is with another.

What I have for you is a template. A template that you can use to lay out color combinations and record the results. A template that I use to provide the data necessary to settle arguments around non-compliant color combinations. So without further ado…

The Files

Here are those template files. We’ll get into how to use them next:

Adobe XD
SVG
PDF

Note: Adobe XD is our preferred design platform, so the XD file will offer the cleanest use. For those using something like Sketch or Illustrator the SVG file should do you fine, and I threw in a PDF version just in case.

Information Sources

Before we move on to using the template, I’d like to share where some of the information I’m using is coming from. You can get contrast information from a handful of places online. My current favorite is color.review.

The Pass/Fail criteria is from the Web Content Accessibility Guidelines (WCAG) 2.1. If you need to reference for minimum contrast guidelines, you can find those within Understanding Success Criterion 1.4.3: Contrast (Minimum).

Using the Template

The template is intended to focus on a single color per page/artboard. Ideally, you would have multiple pages, one for each color you need to explore. The template is made up of three sections:

  1. Color name and information
  2. Scheme interactions
  3. Text interactions

Color Name and Information

""

This section is for general information. Name of the color, a visual representation of the color, and some notes, which should be specific to the needs of the project or the argument you’re trying to settle. Overall, nothing spectacular here, just bookkeeping.

However, regardless of how you adapt this template to your needs, I suggest keeping category and usage information. These color guides need to last either through a full engagement or the life of a brand spec; that could be months or years. Quick tags on usage or grouping are valuable reference material as time goes on. Some examples of tags are:

Category Examples

  • Brand color
  • Application color
  • Primary
  • Secondary
  • Accent
  • Important
  • Light
  • Dark

Usage Examples

  • Background color
  • Buttons
  • Links
  • Logo
  • Light text color
  • Dark text color

Scheme Interactions

""

The scheme interactions area is where all of the color information is kept. For me, this is the most important section as this is where all the conversation ending information is held.

In the example, the color in question is Portent Blue. Each swatch in this area is a different brand color with a “drop” of Portent Blue in the center. Displayed underneath is the contrast ratio between the two colors and pass/fail information for each WCAG contrast criteria. This small chart supplies a lot of information, and it takes away anecdotal arguments such as, “Well, I can see that just fine,” or “That looks close enough.” The numbers are right there for everyone to see, and the use cases are defined.

A warning: cold hard facts are useful, however sometimes they also require a good narrative to be meaningful. Let’s say my client (or your stakeholders) wanted the color of Portent Blue as the background color for a button ideally with the color Clear Blue as the text color. Here is an example of how I might narrate this section for a client:

“The color of Portent Blue, an accent color, has very low contrast against three other brand colors, Navy, Clear Blue, and Pink. The combination of Clear Blue and Portent Blue might look ok to most eyes, but the contrast ratio shows that this combination fails all usage criteria. However, Portent Blue can be used effectively over the neutral colors of light grey and white.”

Text Interactions

""

The last section is text interactions. This section reiterates most of the contrast and criteria information from the scheme interactions section but with one key difference: text.

While the scheme interactions show the global picture of the colors, text interactions expose whether or not content would be legible. If someone struggles to read the sample for a particular swatch, you will likely not hear further suggestions about that combination. You can also lean into these moments of inability and use them as a space to build empathy around your users’ needs and access.

Ideally, I would suggest using the brand typeface when building the examples in this section, but that is not always necessary. If the color combination isn’t compliant; It will not suddenly be compliant with a different typeface.

The Void

You may have noticed a big ol’ chunk of white space in the template under Scheme Interactions. Nothing is missing from the document; the text interactions section just adds some length.

If the open space causes concern, I have some parting recommendations for how to use that extra space:

  • Logo color interactions
  • UI Element interactions (arrows, icons, etc.)
  • Various text interactions over light or dark images
  • An opportunity to contemplate the emptiness between you and that one person in your senior yearbook that you FEEL like you knew but you never introduced yourself to and you just got a recommended friend notification on Facebook because your closest friend added them, and you wonder, “They never talked to each other… are they friends now? Is this just friend collecting? *gasp* ARE THEY DATING?!”

And that is it. Concise information can be the way through emotional arguments. This template has helped me get people on the right side of accessibility; I hope it does the same for you.

Jeremiah Bratton, Senior Front-End Developer

Jeremiah Bratton

Senior Front-End Developer
Senior Front-End Developer

Jeremiah is a senior front-end developer with more than 20 years of experience combining the art of design with the art of programming. He works closely with the entire development team to bridge the gap between creative aesthetic and technical implementation, building functional and efficient sites that meet client needs while delivering a positive user experience. Jeremiah takes a user-focused approach to web development, and is passionate about making the web accessible to as many people as possible.

Start call to action

See how Portent can help you own your piece of the web.

End call to action
0

Leave a Reply

Your email address will not be published. Required fields are marked *

Close search overlay