It’s best not to use your light brand colors in the content of your site in case some of your visitors have contrast sensitivity loss, though there are many places you can and should use them in your site decoration that won’t be problematic and will help spread your brand.

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.

Photo by Aziz Acharki on Unsplash

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.

shark and bull facing off

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.

Screenshot of WebAIM Contrast Checker, with controls for hex value and brightness

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.

What counts as content?

  • paragraphs
  • headings
  • links
  • buttons

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

image of red and green apples, with simulated colorblindness on bottom half, making the apples appear uniformly green
Someone without colorblindness can easily perceive the difference between red and green apples, as in the top of this image, while those with red-green colorblindness would see them all very similarly, as in the bottom, colorblind-simulated half of this photo.

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.

yellowed car headlights

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!

Pie chart of eye conditions: 16% Myopia, 30% Decreased light to retina, 4.25% Color-Blindness

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.

screenshot from CokaCola's website with black and white content to the left of a large image of two coke cans on a red background
See how much of Coke’s brand red they can get into the site by including a product photo with a cut background of red? With so much of their brand color in their decoration, they don't mind having black and white buttons.

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.

man squinting into the sun, overlaid by a light blue-green color
By layering your brand color over any image of your site, you increase the color’s instances without touching your text content.

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.

Appendix: Decorative Element Examples

Image Overlay

            .overlaid {
                background-image: url("squint.jpg"); 
                box-shadow: inset 0 0 0 99999px #83c8bcb5; 
                width: 250px;
                height: 375px;
                background-size: contain;

Horizontal Separator

        .horizontal {
            border: solid 10px #83c8bc

Section highlighters

Ultrices cras elit ut fusce scelerisque magnis sed dapibus viverra porta lacus donec volutpat curae cursus, id lorem commodo mattis congue class tristique maecenas ligula nisl potenti quisque massa consequat.

            .highlit {
                border-left: solid 10px #83c8bc

Focus indicator

Focused link
            .focused {
                box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 4px 8px #83c8bc;
                padding: 2px;

Hover style

            button:hover {
                background: #83c8bc


Really important heading

            .overlined {
                font-size: 28px;
                text-decoration: solid 4px #83c8bc overline

Trailing squiggle

Silly heading

                content: url(squiggle.png);


Another important heading

            .shadowed {
                font-size: 28px;
                text-shadow: #83c8bc 0 0 10px

Text Outlines

Another really important point

            .outlined {
                font-size: 28px;
                -2px 2px 0 #83c8bc,
                2px 2px 0 #83c8bc,
                2px -2px 0 #83c8bc,
                -2px -2px 0 #83c8bc

Want a little help figuring out how to inject your brand colors into your site in an accessible way? Contact us for a consultation and we'll help you make sure you accessibly turn your brand into a firebrand!