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 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.
Lets 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.