David - Tower Marketing

As a web designer, you have a keen eye for detail. Creating color palettes and arranging elements in a visually pleasing way is your job after all!

But when you’re gifted with these abilities, it can be easy to forget that some people struggle to see what we’re able to perceive with ease.

Over 2 billion people worldwide (more than a quarter of the world’s population!) have some form of visual impairment.

Glaucoma, cataracts, and color blindness are just a handful of the challenges they face—the same challenges you should also be taking into account when creating an accessible color palette.

If you’ve been tasked with creating an ADA-compliant website, these five easy steps will help you create a user-centric experience for everyone.

1. Understand Compliance

Understanding ADA compliance can be tricky. Unfortunately, it’s not as simple as a checklist you can reference when building your site. The law only states that you must provide “reasonable accessibility” to people with disabilities, like the ability to use a screen reader and fill out forms.

Although it isn’t a legal standard, most developers and designers follow the Web Content Accessibility Guidelines (WCAG 2.0), which include three levels of compliance: AAA, AA, and A.

Accessibility consists of so much more than color, but for the purposes of this blog, we’re going to focus on which level your site would fall into based solely on your use of color.

WCAG Levels of Accessibility

Level AAA
This is the strictest level of compliance. Level AAA is often used by government agencies, medical providers, and organizations that receive taxpayer funding.
Level AA
This is the median level of compliance. For the majority of companies, level AA provides a balance between meeting legal requirements for usability and having design flexibility.
Level A
This is the lowest level of compliance and is not recommended in terms of color. Color combinations that fall below levels AA or AAA will be considered a “fail” by color-checking tools.

How Compliance is Determined

Your design’s level of color compliance depends on two factors: the contrast ratio between the foreground (text) and the background, as well as the point size of your text.

A contrast ratio of 7 or higher is considered AAA compliant, while 4.5 through 7 will meet AA standards.

A color checker example using Tower Marketing branded colors

An example of a color contrast checker using Tower’s brand colors.

Some color combinations will be AA18 compliant, meaning they are readable at 18px (or 14px bolded) and above. If you do choose to use “borderline” complaint colors like these, however, you should take into account that text may scale down for mobile and no longer meet this size threshold.

Of course, there are exceptions to every rule. If your client is using a font that’s unusually tall or narrow, you may need to find a contrast ratio even higher than the AA minimum.

2. Evaluate Your Accessible Color Palette Needs

Are you confined by your client’s strict brand standards, or do you have the freedom of a blank slate? We have tips for navigating both scenarios.

Working With an Existing Color Palette

With all the attention that goes into carefully crafting a brand, the idea of having to rethink a set of carefully-chosen Pantone colors can cause brands to balk at making updates for accessibility.

Luckily, there are minor tweaks (that no one except a designer would notice!) that can make a website fully accessible. Even slight alterations to a color palette can give you more viable background and text color combinations, making for a more dynamic and engaging site.

For this Tower client, minor adjustments to their existing red and black tones gave us twice the AA and AAA-compliant background and text color combinations.

A Tower client's original and updated color palettes

The client’s original color palette (left) vs. the updated version (right).

If you’re unable to modify a brand’s existing colors, you’ll have to get creative. Find a few key color combinations that pass as accessible color palettes, and then use photography, iconography, and infographics to add more color throughout the site.

Take Apple for example. Their fully-accessible homepage is bright, dynamic, and beautiful, and it utilizes only four colors in six combinations—proving that accessibility is only a restriction if you make it one.

Building a New Accessible Color Palette

Being able to design from day one with accessibility in mind is a huge advantage—and it’s really no different from designing any other good color scheme. In fact, to make strong and accessible color palettes, you only need:

One or two base colors
A strong call-to-action color
A handful of neutral colors

Call-to-action colors are typically where designers struggle to remain compliant. If your CTA button is lighter (like yellow or light orange), try dark text instead of the more traditional white. You can also save fun, bright colors for hover states and opt for a slightly darker default tone. This can help buttons draw visual interest while still keeping them compliant.

3. Find a Color Contrast Tool That You Love

If you’re working on a new website or a website redesign, you’re going to spend a lot of time with your color contrast tool. So, take a moment and find the one that works for you. Here are a few recommendations!

Contrast Grid from EightShapes — This is our all-time favorite at Tower. It allows you to investigate not just one color, but all of your colors in context with one another. It also generates a unique link for every color palette, making it easy to share with clients, other designers, and developers.
Toolness — This is a similar tool that grays out non-accessible background and text color combinations. It can be especially helpful in visualizing and explaining compliance to those who are new to the guidelines. Since there are no non-compliant combinations shown, they won’t distract from the fully-accessible options.
Colors — We love this tool for its sheer inspiration and dozens of bright, exciting accessible color palettes. This can be a great place to start if you’re feeling overwhelmed.
Color Safe — This is another great option for creating an accessible color palette, as it also takes into consideration the specific typeface and font weight you’re using.
WhoCanUse — Finally, we recommend that you test your accessible color palettes with this tool that shows how people with color blindness, glaucoma, cataracts, and more will perceive the tones you chose (as well as what percentage of the population has these visual impairments).

The homepage of the color checker website WhoCanUse

4. Adjust and Iterate

Chances are, the first accessible color palette you try won’t be quite right. There may not be enough accessible options, and even if there are, the combinations available may not be a good fit for your client.

Context is Key

Play with your colors in the context of your design program. If you’re making minor alterations to an existing palette, check your new colors alongside old collateral. Is the difference noticeable? Is that a problem?

Consider print applications as well. Colors may look great online but horrible on paper, and vice versa.

Utilize the Right Design Tools

Having a powerful tool at your disposal is the key to working accessibility into your existing design process. At Tower, we use Sketch, a design program with a nearly endless library of plugins.

Stark is a color contrast analyzer that operates right inside your design file. It also has the unique ability to mimic different types of color blindness, from the most common to the very rare.

This is especially important when designing infographics and charts where differentiating colors is crucial to understanding the content. While colors may look completely different to you, if they are too similar in brightness or hue, they may be indistinguishable to someone with partial or full-color blindness.

The homepages of the websites for Sketch and Stark

Sketch and Stark are two tools we use at Tower and can recommend for others.

5. Remember Why It Matters

Designing through the new lens of accessibility can be frustrating at times, especially when working within an existing brand’s color scheme. It can be easy to get excited about a bright and edgy design, but the bottom line is that websites need to be both usable and beautiful.

Viewing ADA compliance as a challenge, rather than as a roadblock, can keep things in perspective and strengthen your design skills along the way. Plus, it will make the web a friendlier and more accessible place for everyone when we use accessible color palettes.

An older woman using a laptop in her office

At Tower, we work with many small businesses for whom individual customers are the prime focus, making visual accessibility, specifically accessible color palettes crucial for every site we build.

If you need to redesign or update your website to be ADA-compliant, our team of designers and developers is ready to help.

Explore Our Design Services

This blog was originally published on June 13, 2019. It was updated on July 6, 2023.

Times change. Businesses grow. And if your company’s website isn’t keeping pace, it could have serious implications for your success.

Because your website serves as a digital representation of your brand, it’s absolutely critical that you get it right. If not, a website visitor will bounce to your competitor’s site before you can even blink.

Web users are cut-throat. If your website isn’t set up to serve them—and serve them well— they’ll leave you (and any consideration of buying a product or service from you) in the dust.

So, is your website looking a bit dated and dusty? Then it’s likely time for a website redesign. In this blog, we’ll explain what a website redesign is, how it can benefit your business, and help you prepare for a website design in 4 crucial steps.

What is a Website Redesign?

Many people tend to confuse a website refresh with a website redesign. Although similar, these projects serve different purposes and vary significantly in scope. Let’s take a look at the key distinctions between the two.

Website Refresh

A website refresh involves making slight changes to a website while leaving most of the code and structure unaltered. These changes are typically relatively minor, easy to execute, and don’t require extensive time or resources, such as swapping in a new logo or updating old product pages.

Website Redesign

A website redesign is a much more involved process that requires updating the content, structure, format, and navigation of your website to improve its overall performance and convert more website visitors. In other words, it’s going back to the drawing board and rebuilding your website from the ground up.

Depending on your situation, a website refresh may suffice to meet your needs. Or, you might need a complete transformation. Here’s how to know when to go for a full website redesign.

How Do You Know When It’s Time for a Website Redesign?

Before you invest valuable time and resources into a website redesign project, you should make sure that you’re doing it for the right reasons.

“My competitors just redesigned their website, so I want to do something similar” isn’t exactly a good reason if your site is effectively attracting visitors and converting leads. Here are three reasons why you should consider redesigning your website:

1. Your Goals Have Changed

Have your business goals changed drastically since launching your website? If the answer is yes, it likely no longer represents your company accurately. A website redesign can ensure that your site aligns with your current business goals and that they’re conveyed properly to your target audience online.

2. Your Branding Has Changed

If you’ve recently undergone a company rebrand or are planning to update your color scheme, logo, and messaging in the near future, then you should redesign your website to reflect those branding changes and affirm your new visual identity.

3. Your Web Performance has Plummeted

Website performance is a clear indicator of whether or not your site is meeting users’ needs. To determine how your website is performing, ask yourself the following questions:

Have leads decreased?
Are people staying on the site or bouncing?
Is the website converting a reasonable amount of traffic?

If you’ve noticed that your website performance has decreased, that’s a red flag that your website may be outdated or out-of-touch with your target audience. A website redesign can help you identify and resolve issues related to poor performance.

How to Prepare for a Website Redesign

The website redesign process involves a lot of time, resources, and decision-making. And, the better prepared you are ahead of time, the easier it will be. Here is how to prepare for a website redesign.

Step 1: Complete A Website Audit

Before you decide what changes to make, take the time to review your current website and determine what’s working well and what isn’t. Be objective and take note of any areas that need improvement so you can address them in the website redesign.

If you need some guidance, here’s a helpful tool that you can use to access how well your site is currently performing.

shutterstock 255995734 jpg How to Prepare For A Website Redesign

Get Your Free Website Check-Up Checklist

While auditing your website, be sure to consider the following:

Content

Evaluate your current content to decide what should be reworked. Look at everything—from blogs to videos to downloads—and ask yourself:

Is it audience-focused?
Is it easy to understand?
Is it helpful or useful?
Is it current?
Does it match my business goals?

If the answer to any of these questions is no, then that piece of content needs to be updated.

It’s important to note that not everything on your site needs to be changed. Content that’s performing well can likely be left as is. Your website redesign team can help you repurpose strong content, identify gaps, and create a new content strategy to pull it all together.

Search Engine Optimization

In addition to assessing the effectiveness of different types of content on your current site, you should consider if it’s optimized for search.

If you don’t have a search engine optimization (SEO) strategy in place or yours needs to be adjusted, a website redesign could be in your best interest. This is an ideal time to optimize existing content and create new, strategically-worded copy to increase traffic.

If you do have a strong SEO strategy in place, then your current website has likely gained authority and is ranking well for relevant keywords. In that case, it’s critical to have a knowledgeable website redesign team that will properly migrate that content to your new site.

Failure to follow SEO best practices when migrating content can cause crawl errors, search engine red flags, and other penalties that can make your site undiscoverable.

User Experience (UX)

You can have great, optimized content and stunning branding, but if your website provides a poor user experience, it won’t perform well.

Today’s customers don’t just base their loyalty on a product or price, but rather on the experiences that they receive. In fact, 73% of buyers consider customer experience to be the primary factor for their purchasing decisions. This also applies to their experience on a company’s website.

You have about seven seconds to make a good first impression on a website visitor before they flee to another site. So, if your site is hard to navigate, lacks information, and isn’t accessible or mobile-friendly, then your users probably aren’t staying on it.

Thoughtful user experience (UX) design can greatly improve your website performance.

Woman sitting at a desk writing down notes.

Step 2: Determine Your Goals & Budget

We’ve already discussed the importance of having a good reason for overhauling your website. So, what’s the “why” behind your website design? Write out the goals that you have for your new website and tie them to measurable results. For example, some of your goals may include:

Increasing traffic to your website
Reducing your bounce rate
Increasing time on site
Generating more leads and form submissions
Improving SEO rankings for notable keywords

Communicate these goals with your web redesign team to ensure that everyone is on the same page. This will help them better determine your needs, pricing, and projected timeline.

Before discussing pricing, however, you should determine an amount that you’re willing to spend. Everyone wants a high-quality website that’s built quickly for a low cost. But remember, your website is your greatest sales investment. Cutting corners just to reduce costs can lead to expensive consequences and missed profits in the long run.

Step 3: Define Your Branding

Before you can dive into content and design, you have to decide what look and feel you want your new website to have. Your website serves as a visual representation of your business. So, you want to ensure that your branding matches your company’s mission, values, and overall brand identity.

Being very clear about your desired branding, messaging, and tone will guarantee consistency across your site. During this step, ask yourself what you like about your current branding, what you want to change, and why. Here are two helpful steps you can take to flesh out your intended visual identity.

Create a Style Guide

Once you’ve determined what you’d like to keep and change about your current branding, write it all out in a style guide. Be sure to include your preferences on color palette, logos, fonts, imagery, and icons. Having all of this information recorded will help your team achieve cohesiveness during the website redesign process.

Gather Assets

Now that you’ve defined your branding, you should compile all of the files that your team will need for your website redesign. This includes any vector file logos (.svg, .eps or .ai), photography, and other essential visual assets. While gathering files, carefully consider whether each asset fits into your new style, or if it could use some adjusting.

Two male employees compare color swatches for a project.

Step 4: Choose Your Website Redesign Team

The final step to prepare for your website redesign is choosing who you want to work with.

A website redesign is a big investment, so you need to be able to trust that the people working on your project will get it done right. Since any mishap will cost you time and money, don’t just go with the cheapest option you can find.

Rather, do extensive research before you commit. Look at past projects, reviews, prices, processes, and inclusions for every freelancer or agency you’re considering. Once you narrow down your choices, send out a request for proposal (RFP) for website redesign services. Once you receive the proposals, you can make the best decision for your needs, budget, and preferences.

If you need to make extensive changes, we highly recommend hiring an agency (like Tower) for a website redesign. Agencies typically have streamlined processes in place to make every part of the website redesign process go as smoothly as possible and stay on track. Here are a few other advantages of hiring an agency:

Extensive knowledge and services
Collaborative group of specialists
Access to advanced software and resources
High-level professionalism
Superior communication

The people you choose to work on your website redesign can quite literally make or break the whole experience. So, be sure to choose wisely!

Looking for the right group of people to bring your vision to life? Check out our website redesign services to see how Team Tower can help!

Explore Web Design Projects

If there’s anything that’s been learned in the wake of the pandemic, it’s the importance of having an up-to-date online presence that represents your brand just as well as a face-to-face meeting. Your brand is a lot more than just a logo and some copy. It should be an experience.

As a digital marketing agency, we help our clients explore new strategies to elevate their brand via web design, creative, content, and more every day. However, just as we encourage our clients to explore new ideas in their digital marketing, it’s only fair that we take our own advice.

While our brand refresh started in a seemingly “regular” world, it certainly ended in a changed one. In early 2020, as we dove into redesigning our site, content, and digital assets, our team was suddenly scattered. On top of that, most (if not all) of our regular routines were paused.

In spite of everything, we successfully elevated and reached our goals. Here’s the “why” and “how” behind our recent brand refresh and some tips you can apply to start your own along the way.

Rebranding vs. a Brand Refresh

Before digging in, it’s important to understand the key difference between a brand refresh and a rebranding project. The idea behind a brand refresh is that you’re reimagining the feeling of your brand using what you already have. It’s primarily a visual process where you adjust your assets to keep your business looking current.

Rebranding your company successfully is a much larger project where you get rid of everything you’ve done previously and start from scratch. This can include creating a completely new brand voice and tone, trying to break into new markets, and completely re-doing your company’s image.

Starting on the Ground Floor

Our previous website was from 2017 and was due for a redesign, knowing it’s optimal to update your site every 3 years. Plus, it was clear it didn’t match the direction our company had evolved into as well. However, the catalyst for updating your digital branding shouldn’t always just be an “older design.”

As soon as your online branding feels out of alignment with your business strategy or vision for the future, it’s an indication that it’s time for a refresh. Sometimes that can just be minor tweaks to what you have, while other times more drastic action is required.

For Tower, we saw a need to elevate our own branding to match the shifts we’d undergone in the past few years. While we didn’t need to do a complete overhaul, we found a lot of opportunities to push ourselves beyond what we had done in the past.

Why a Brand Refresh Matters for Your Business

Your business is making progress every day. As you move forward and scale your company, it’s important to also continue refining and evaluating your brand to keep it sharp. This doesn’t always require designing a completely new logo or color palette. Refreshing your brand can include updating content on your service pages or replacing old, outdated images.

There’s no set time frame for how often you should be doing a brand refresh. However, the industry you’re in can have a hand in how often you make these types of changes.

If you’re a brand rooted in history, stability, or security (like a financial institution or college) you shouldn’t have to refresh that frequently. However, if you’re in a fast-growth industry like tech, your business will likely need a brand refresh more often to compete in the digital landscape.

The Key to Re-Doing Online Branding in Digital Marketing

When it came time to approach this project, our team found it extremely helpful to establish some simple ground rules and then outline a process before digging in. Our ground rules throughout the whole process were to:

Keep our signature green color
Keep our current logo
Keep Cabrito (our main typeface we created internally)

From there, we then completed a visual audit of all our materials including our website, business cards, previous campaigns, social media posts, and much more. Our team sorted various assets into two categories — one for assets that “work” and one for those that “don’t work.”

While this part of the process required a lot of back and forth between our broader team, it spurred useful conversation. This audit allowed us to pair down the elements we liked and the ideas behind them, as well as see what areas needed the most attention. From there our team got to work redesigning creative, strategizing SEO, experimenting with dev, and drafting new content to match our updated brand voice and tone.

Think Outside the Logo

For any business diving into these types of changes, the biggest pitfall is thinking your brand is just a logo. At Tower, we encourage you to take a holistic marketing approach. Ultimately, your business is conveyed through everything — fonts, type treatments, colors, patterns, layout compositions, photography, written content, and much more.

The goal is to make sure all these elements are cohesive to the point that even when viewed separately, they still clearly portray your brand in the same light. When you take the time to do this, the benefit is that your brand becomes recognizable for consumers. It sticks.

For Tower, we started by pinpointing the areas we wanted to change and then got to work fine-tuning every single element. In the end, our goal was to make sure everything fit that holistic approach.

Finding Your Inspiration

Our office has a saying that first came to light when our team brainstormed for a campaign a few years ago — “elevate.” Over time, it became a crucial part of how we approach marketing for clients and, ultimately, ourselves. We took that concept and we ran further in terms of this brand refresh.

“Elevate” was behind every decision we made in the process. We went as far as taking pieces we thought were good and working to make them even better.

Anything that wasn’t working and had even become dated or cliche was scrapped altogether. The idea of “elevating” became our litmus test for all design, content, and development choices.

Staying Inspired in the Unexpected

While the state of our clients and our business had to rapidly evolve to respond to the pandemic, our team still continued pressing forward with our brand redesign. If anything, the pandemic opened up interesting opportunities to look at the idea of collaboration differently.

Collaboration is certainly the key to creating, however, there is also great value in having a chance to actually retreat from distraction and do the work itself. Being remote gave us a chance to become fully immersed in the project and our ideas without any interruption. Working in this hyper-focused manner was actually a huge benefit to developing the more difficult and complex elements.

However, our team also balanced working remotely by supplementing our progress with check-in meetings and plenty of video calls. Doing this allowed us to clearly communicate and stay on the same page.

Ultimately, here’s the biggest takeaway — it’s important to build in pockets of time to collaborate on refreshing your brand with others, while also balancing it with uninterrupted time to work individually on it.

Staying One Step Ahead of Your Competition

With any brand refresh, it’s crucial that you’re aware of the competitor landscape. You want to make sure that, in the end, your outcome goes far beyond what they’ve done so you can carve your own unique spot in the industry.

Make sure that a part of your project includes investigating your competition. Ask yourself the following:

What are they doing?
What are they saying?
What is their user experience like?
What can you do better?

You want to avoid doing or saying the same message. Otherwise, you won’t stand out. You need to be refreshing your brand not not just to “look good” today, but to ensure you stay relevant in the months ahead.

Develop Your Unique Value Proposition

As you’re working, make sure you take time as a team to be introspective of your company. Clearly define what makes you different. In our case, it was the idea of “elevating.” However, that won’t be the differentiator for every company, and you’ll need to decide what makes yours unique.

It’s worth devoting the time to sort this part out during your brand refresh process. Knowing your unique value proposition as a business will keep your strategy clear and brand refresh work cohesive. Plus, that differentiator can even become the very hook that draws in your target audience to choose you over your competitors.

Know it’s time for a brand refresh, but need help executing it? Contact our team to learn how we can help you reach your next goals with our creative services.

Contact Our Team