Expanding Your Brand and Making it Accessible

Lindsey Gemmill
Two girls looking at tablet together

Web compliance is a big thing to tackle, and it may seem overwhelming at first but eventually it will become a part of your routine when you are thinking about the web. That could either mean you are thinking about it in terms of the alt text you are putting on your images, adding captions to videos, making your PDFs accessible to screen readers or — in this case — I’d like to talk about your brand.

Going through the process of building your brand is both valuable and rewarding. Unfortunately, what I’ve come to experience as a web designer, is that the digital space is still being neglected. It could be from a recent brand overhaul you’ve just finished and weren’t ready to redesign your website yet or it could be that you’ve stuck with your brand colors from the day you launched your business, and this was all before accessibility on the web was even thought about, so now you’re bringing something that was designed for print to the screen.

Whatever the case may be, it is recommended to do a full brand evaluation to determine what you can use, what you need to adjust, and what you may just want to set aside when it comes to bringing your brand to the web. The three most crucial parts of your visual identity that are affected when brought to the screen are colors, fonts, and your full logo.

Brand Colors

Let's face it — some colors just aren’t going to look good on screen. And to a brand owner, colors are like the backbone to your business. You are proud of the way they compliment your message, and colors are one of the most commonly associated brand elements, so changing them is probably not going to be your first choice.

Don’t worry though, you don’t have to! There are many ways you can work with your brand colors on the web. Remember that the most important thing when working with color on the web, is that you need to check to make sure it is passing the correct contrast ratio for the screen.

The first thing I do when I get a brand standards guide to use for a website design is open up the WebAim Color Contrast Checker and plug in the brand colors. It is extremely rare that when I am checking for proper contrast, that every brand color in your guide will pass. Again, this is because when you created your brand standards, print branding was probably the primary focus.

Understanding how to check for proper contrast is key to making this work. I will check the same color on white backgrounds — black backgrounds — and shades of grey. It is not too common that I will know beforehand what other colors I need to try to combine, but it is a good foundation to understanding what we can work with right off the bat, and what we should try to manipulate. There are definitely instances where a color will pass on a white background and fail on a black background, so just because it works one way doesn’t mean it will work the other way.

In some instances, colors that do not pass are a simple shade away from passing. When this happens, the difference in swatches is barely noticeable, and it is a safe bet to move forward with that color on the web, but keep your original color for your printed materials.

Here you’ll see an example of how close to passing some colors can be. On the left is the color that fails, and the right is the color that passes. I can barely tell them apart, can you?
Here you’ll see an example of how close to passing some colors can be. On the left is the color that fails, and the right is the color that passes. I can barely tell them apart, can you?

Color contrast concerns also arise when foreground colors (like your fonts) are just way to close to the background color. Although you may have an amazing shade of lime green, and to you it doesn’t look like there is any way it could get confused with white, if you plug it into the contrast checker you’ll find that it fails. So first you think, no problem, the blue I just checked wasn’t far off, I’ll just step this up a shade darker and we’ll be fine. However, that didn’t work either. You keep trying to darken it and find ways to keep the vibrancy of your green all at the same time, and you end up with some forest green — totally different — not so bright green that doesn’t look anything like the original color. This is the point where you have to think about how you were planning on using that color, and if it makes sense to add a totally new color to your palette or even if you want to work with the color that passes at all.

On the left you'll find the green that fails, and on the right you'll find the closest match that passes.
On the left you'll find the green that fails, and on the right you'll find the closest match that passes.

Now, I'm not saying that adding colors to your standards is a bad thing, but sometimes it just doesn’t align with the overall look and feel of your business. The hardest part about working with colors like these, is that in a lot of cases this is your primary brand color and you want to use it as much as possible to provide recognition and maintain consistency.

The tears start to fall down your face — you are realizing that the foundation of your visual identity just isn’t suitable for the web — or is it? Just because your color doesn’t pass as a text font, there are still other ways you can bring that color into a website design, make it prominent and meet accessibility standards.

Depending on the situation, you can do quite a few things. One of my favorite ways to use bright colors is to use them as background colors for row elements that you will create some type of card layout on top of.

Brand color can be brought through in supplemental ways to your primary content.
Brand color can be brought through in supplemental ways to your primary content.

This will allow you to provide that wow factor with your brand color and you can still put whatever content you want with it because we have created a space that allows you to combine both passable and non-passable elements.

The next example, which I have seen trending for the past few years now, is doing a color overlay on an image. Be careful when you are doing this though. I see it most commonly used in header areas that have some sort of text overlay on top and this is where you start flirting with legibility issues again simply from the colors that didn’t pass combined with the elements in the picture.

To get around that, you can do a couple of things. First you can do something similar to what we did with the row of cards above, where you actually create a white area to put your text in on top of your image. This is usually only good in a few situations, but when executed properly it will really make a statement. Though the way I see this working best is when you are using images with these color effects as complimentary elements to your text. That way we don’t have to worry about putting text on top of an image, but we can still bring that pop of color to your website.

mockup of green color overlay over image with no text on top

But wait, there’s more! You can also use these colors in elements that are deemed decorative to the design. What this typically means is things like dividers in body copy, icons next to descriptor text, extra hover state elements, or patterns that appear away from text.

One thing that gets a little tricky here is the icon portion. There are a lot of ways that icons are used throughout websites, so simply saying you can use colors that don’t meet contrast standards for all icons on any website is a bit of a stretch.

The way to approach this is by asking yourself, what does this icon provide to the page and to the context? If the icon is simply there as an accompanying element to text on the page, it is usually a safe bet to say you can use your brand color here. However, if you have a list of icons, for example on mobile devices when we see icons as menu items that don’t have text with them, you should be using a contrast compliant color. The reason for this is that the first example has text on the page to explain what the icon is there for, but in the latter example I have no idea what that icon is for, and if I can’t see it properly, I’m certainly not going to know where to click.

On the left you'll find an accurate usage of icons for decoration, it is followed by a tex label that passes color contrast and size ratios, to the right you'll see icons with no description and no context, meaning they're informative and need to pass color contrast standards.
On the left you'll find an accurate usage of icons for decoration, it is followed by a tex label that passes color contrast and size ratios, to the right you'll see icons with no description and no context, meaning they're informative and need to pass color contrast standards.

Typography

Now that we’ve got color contrast out of the way, we move on to your brand fonts. You’re probably thinking to yourself right now, well I can just use the same font what is the big deal? There are a number of reasons why this just may not work out. The primary reason is that you’ve chosen a font that simply does not have an accompanying web version. When you’re looking at a font on a screen you’ll notice that they are usually a specific weight and have a particular amount of spacing between letterforms and words that differs from a printed font. Fonts designed for print are different than fonts designed for the web, and if you don’t have a web version of your font you’ll want to look into other resources.

The first place I always start when I do this is Google Fonts. There are a number of reasons to start here, but I mostly do this because developers recommend working with Google Fonts, because it helps with things like caching issues and page speed. Google Fonts are also free, and were built to work well in digital environments. Simply put, it is industry standard to check Google Fonts for a comparable version to your existing font if no web version exists.

Another instance you’ll probably want to use a Google Font is when you are working with an epic font from an epic type foundry, and you realized that when you bought the font the web version wasn’t included, or it is included but it correlates to a certain amount of traffic on your website, so you need to buy the appropriate version based on the scale of your business. You click add to cart, and you see an insane number that you just didn’t expect. Unfortunately, there are a lot of folks that just aren’t ready to put the money forward after you already paid for the print version; after all nobody told you that you’d need a separate one for digital. Here is a great time to circle back and explore Google Fonts, because they’re not going to hurt your wallet and most of the time they have a font that is not noticeably different from the one you’re currently using.

Touching back on page speed for a moment, it is best to be thinking strategically about how you are using different fonts on your website, and what of the font you are loading. This isn’t particular to salvaging your brand per se, but it is important for good user experience to have faster page load and consistent typography throughout your entire website. When you add 6 different fonts to your website, not only are you going to start causing some confusion about your brand, but you will also start to slow down your page speed.

A good way to create diversity with fonts, is to choose fonts that have a variety of weights to work with. Air on the side of caution here too though, because if you load 10 weights of a font, you are going to slow down the page speed again. What I recommend doing here is choosing a font with a lot of diversity, but then narrowing it down to a select few that you use. Another way to help is by choosing a font for body copy that maybe only appears in regular, bold and italic, and then for your heading fonts you can start to add versions like light and heavy to the mix. It will balance out the load time if you choose one font with 5 weights, and one with 3 weights just the same as loading 2 fonts with 4 different weights. Remember, if you aren’t using a weight of a font, don’t load it onto the page.

Logos

The last thing that many people don’t think about for the web is their logo. For the most part it is just here is the file and that is that. However, the same issues that showed up with our color contrast and fonts will also happen with your logo. It isn’t as much of a concern with the font since your logo is usually a graphic and not a line of text written in HTML, but you should consider working with the fonts you’ve chosen for your website.

When moving to the screen you have to think about your logo in different ways. You want a compliant version, but you also want a version that works in different spaces. What I mean by this is, you’ve got a website and your logo fits so nicely in the center of the screen in your top navigation bar that isonly 75px tall-and then you try to upload it to your favorite social media platform and it becomes illegible.

Typically when you developed your brand you will have different versions of your logo. Usually one in color, one in black and white, and one in white. If not, this is another great thing to consider doing for both print and web. From there you should take it a step further and have a version that works both horizontally and vertically. This goes back to the spaces example, where a vertical logo would look much better as a profile picture than a horizontal one.

The last thing to think about when working with your logo on the web is a way to make it work as a symbol. For a lot of you out there, you already have an icon that accompanies your logo. If you do, making sure that when you scale it small you aren’t losing any of the important details or effects is the first thing you should try. If that does happen, consider creating a more simplified version of your icon so it isn’t too complex for the small spaces it will show up in (especially thinking of the favicon (icon in your tab) in your web browser).

If you are on the other side of the scale, and your logo is simply a text-based mark, you can consider using things like patterns (if you have them established in your standards) or using a letter or acronym to be your logo mark. Again, think about how logos work on the web, and how they can go from being super tiny profile images and favicon icons, to large full banner overlays. Be mindful that you’ll need to adapt to the space you have, and making your logo more flexible will make things a lot easier in the long run.

Read my blog about responsive logos to gain a deeper understanding into what digital logos should look and behave like.

Thats all folks

That’s it, we did it! We took your current brand and we established a set of guidelines to work within to build out your website, your social media profiles, email templates and many more screen related scenarios. It may sound like it is overwhelming at first, but remember you only need to establish these standards once and work within them moving forward.

WRITTEN 2017 | Originally posted on Medium

Recent Ramblings

Infographic

Small businesses need Professional websites too

What your team needs to know about small business websites and how you can understand the value they bring to your business.
Lindsey Gemmill
Web Design

You Did it! You got a new Website...Now What?

The epicness of having a new website is a totally amazing feeling. After a while though, you start to think if there is something else you can do.
Lindsey Gemmill
Drones

The Value of Drones in the Real Estate Market

Showing potential buyers just how serious you are about selling is critical, and to do that you need to make a great first impression.
Andrew Pearson