Accessible Firebrand: Why can't I use my brand color there, and if not there, then where?

From brand to firebrand

Everyone wants their brand to take off. That’s the point of a brand. Companies sit down, think of all the associations they want to create in everyone’s mind, and in everyone’s heart, and design the brand to accomplish that. Recognition is important, but the goal of the brand is beyond that. The goal of the brand is to spread, so that enthusiasts for the brand pop up all over the place. Every brand is a firebrand.

As everyone knows who’s built a fire when camping, it takes a while to get the fire going. Beyond that, the pyromaniacs among us will know that it also takes a while for the tip of a long stick put into the fire to catch fire itself to be useful as a torch, or a signal, or as a firebrand to light other campfires. Once it becomes a firebrand, though, it’ll burn for a long time before going out, unless you stamp it out, smother it in dirt, or douse it in water.

You wouldn’t do that, though, now that it’s at its productive stage. Instead, you’d use your firebrand to light everything around you that needs to be lit, be it your friend’s campfire, your cookstove, or that pile of pinecones you built up because… why not?

The goal of your firebrand is to spread your campfire. Similarly, the goal of your company brand is to spread like wildfire. Unfortunately, there are many things that can get in the way of its doing that. One of those things is the inaccessibility of the brand colors, but only if they’re used in the wrong way.

Bulls and sharks revisited

A year and a half ago in Bulls Can’t See Red, Can Sharks? I explained why it was so important to make sure your colors have a high enough contrast ratio to meet the accessibility standards. I showed some examples of color schemes that don’t meet the standards, explained why they don’t, and explored some of the problems of not meeting the contrast ratios.

I gave some tools you could use to see whether your colors meet the contrast-ratio standard of 4.5:1 for the text of your regular-sized content. Principally, I recommended the WebAIM Contrast Checker for testing specific colors and figuring out how much you’d need to darken them to make them accessible for your content.

While helpful for discovering color schemes that don’t work, and modifying them so they do, this tool can’t really help if you’re committed to your brand color, don’t want to modify it, and it’s unfortunately too light to be used on any of your text, whether links, buttons, or headings. What can you do then?

Brand theory

Before I attempt to answer that question, let’s spend a little bit of time considering why a company would be attracted to the idea of using their inaccessible brand color in various places that they’d otherwise want to be highly readable. First, they likely don’t know it’s not readable in their brand color on the one hand. If they have perfect eyes and fine contrast sensitivity, it may be easy for them to read something that objectively has a low contrast ratio.

On the other hand, they probably really want to inject their brand into their website as many places as possible. They’re invested in that color, probably rightly so for the emotion it evokes in their customers when they see it.

Color is powerfully evocative, as Branding Strategy Insider points out. Brands hope that by using it more liberally, their customers will become even more attached to the brand. This is why the brand color often ends up in text, links, headings, pull quotes, buttons, and navigation.

Content vs decoration

In our Quick and Dirty series on content generation, I explained one method for hammering out your website content as quickly as possible, but in that I never really defined “content”. It’s important to know what that term means as far as accessibility goes, especially since the standard your site needs to adhere to is the Web Content Accessibility Guidelines (WCAG). In this context, your content can expansively be defined as the parts of your website that convey meaning.

More narrowly for our purposes today we can restrict the definition of the content we’re interested in to the text of your site. This can be further clarified as being your paragraphs, headings, links, and buttons. There are a few other things that would fit the bill, too, but this is a good starting list.

It’s vitally important that these aspects of your site are easy for your visitors to see, read, and understand. These things convey the point of your site, so you want there to be no barriers standing in the way of that.

Content barriers

Unfortunately, barriers come from many factors. Over 4% of the population suffer from colorblindness, so you should make sure to avoid expressing aspects of your meaning (like whether a part of your text is a link, for example) using only color.

Further, 30% of people suffer from myopia, and myopia has an inverse relationship with contrast sensitivity. In other words, the greater the myopia, the lesser the contrast sensitivity. The result of this decreased sensitivity is that those people with sensitivity loss might be unable to read the light color text on a white background.

Another consideration is that about 16% of the population is over the age of 60. We love our visitors that are over 60 because they often have more disposable income and more disposable time, but between the ages of 20 and 60 there’s a decrease of about two thirds of the light reaching the retina.

The yellowing of the cornea that causes this decrease in light reaching the retina is kind of akin to how the yellowing of the glass of your car’s headlights restricts the light leaving the headlight and then making it back to your eyes. It’s harder to see when driving with yellowed headlights, and by the same token, the less light reaches the retina, the more difficult it is to distinguish between similar colors like the light brand color on a white or pale background.

All of this is just to say that color can be a pretty significant barrier for roughly half (4% + 30% + 16% = 50%) of your visitors. Make sure you keep that content (paragraphs, links, headings, etc) in a color that is as easy for most people to perceive as possible!

But now it’s a quandary: if you can’t put your brand color in the content of your site, where can you put it? The general answer to the question is that you can put it anywhere in the decoration of the site. Decorative elements don’t have to follow the Web Content Accessibility Guidelines, since they don’t count as content.

It’s true that using your inaccessible brand color in the decorative elements of your site will mean that about half of your visitors won’t be able to easily perceive your decorations. That’s okay, though, because the decorations of your site aren’t essential content. They can help build your brand identity among those who can see them, but won’t adversely affect those who can’t.

Sprucing the place up: Decorative elements

On the web the possibilities for decorative elements are almost only limited by what you can think up. Well, that, and your budget for development time. If your brand colors are featured prominently in your logo, you might make sure that your logo is shown frequently throughout the site– in the header, certainly, but also, potentially in some decorative asides, and in the footer.

You might overlay your brand color on some images in your site to tint them to evoke your brand. Or have decorative boxes in your brand color, potentially with light or dark symbols inside them.

Almost anything graphical gives your audience a mental rest from your text, so you kind of can’t go wrong. Just like you want plenty of white-space in your resume, you want plenty of white-space (or in this case, colored-space) in your site.

Beyond those broad elements, some of the easier decorative elements you might put in are section dividers or highlighters, focus indicators (really only seen by people navigating by keyboard), hover styles (really only seen by people navigating by mouse), and text decorations.

Some of the text decorations you could inject your brand color into are overlines, trailing squiggles or checks ✓✓✓, shadows, or outlines.You can see examples of these and more, along with the styles to accomplish them, in the appendix at the end of this post.

Many of the options in the appendix won’t work stylistically with your site, so we’ve included a bunch of options so you can hopefully find one or two that would work for your site. Just like with the more standard strategy of using the brand color in links or buttons, you’ll be surprised at how much the association with your color will be strengthened by a few repeated decorative uses of it throughout your site.

The goal is just to get your brand color into your site in as many non-content spots as possible. Doing this will help associate your site, and by extension your company, with your brand color. Then, when you have a number of such decorative elements, you won’t feel like it’s a missed opportunity when you decide to make your buttons black with white text, or your links dark blue with an underline. You don’t need to use content elements to emphasize your brand colors if your brand colors are popping up all over the site in its decoration.

Set the world on fire!

You’re out to do some good. That’s why your brand is so distinctive, and why its colors are so important. The fact that you have some colors in your brand, even the main ones, that have contrast ratios that are too low to use in your regular text on your site just means that you’re going to have to find some other places to use those colors.

We think if you get creative you’ll be able to come up with enough other ways to use your brand colors that you won’t suffer from not using it in links, headings, buttons, and text. Doing this, your brand can have an even greater impact on the world since it won’t be blocking some visitors’ abilities to understand the content of your site.