Are Your Brand Colors Accessible Colors?

Worldwide, 2.2 billion people live with vision impairment to some degree. That means that one in four people who visit your website might not be able to understand it.

Website accessibility becomes increasingly more important every day. And yet many companies still use brand colors that lead to visitors struggling to figure out their site.

Some reports show that only 1 percent of the top million homepages on the internet meet accessibility standards. Color contrast is one of the simplest accessibility aspects on your website that you can fix, and it doesn’t mean a complete rebrand — unless you want it to.

Instead of going back through the full branding process, you can add accessible colors to your brand guidelines. It might mean darkening primary brand colors slightly or setting standards for what color background you can use with those brand colors.

WCAG 2.1 AA Color Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) sets forth guidelines for minimum contrast ratios. It includes three main criteria to guide everyone on making websites accessible.

1. Small text or images of text should have a contrast ratio of at least 4.5:1.

2. Large text (18 points or more, or no smaller than 14 points bold) must have a contrast ratio of at least 3:1.

3. There are no requirements for incidental elements or elements used for decoration on a website.

4. Logos and the text within those logos do not have a contrast requirement.

The reason behind the different contrast ratios for regular text and large text is that larger characters have wider strokes, making them easier to read. Bolding the text can make it even more readable by increasing the letters’ strokes.

How to Measure Color Contrast of Brand Colors

Measuring the accessibility of your brand colors is as simple as entering them into a free online system. Set the text color, the background color, and the font size to see whether you’re in line with website accessibility standards.

Minor changes in the colors can produce astounding results for making your text accessible. And most times, the untrained eye (which includes most website visitors) won’t be able to tell the difference between your original brand color and your accessible brand color.

Just because you have an accessible brand color does not mean you have to use it in all instances. Your logo and website ornaments can keep your original brand color but the text and backgrounds for your website should always bear the accessible color.

To better understand how these colors work in practice, we’ll look at a few examples of how other companies have applied accessible brand colors.

Examples of Developing Accessible Brand Colors

While not all website accessibility standards are easy to comply with, color contrast ratios are. Look at how two companies have adapted their brand colors to meet the needs of those with vision impairment while demonstrating that minor differences in an accessible version of a color won’t make your brand unattractive in any way.

The Branded Group

The Branded Group uses lime green as its accent brand color. The hex color is #41CB16. On a pure white background, the color contrast is only 2.1, which means it fails AA WCAG requirements.

When used on a dark grey background, the color can pass contrast ratios, but that doesn’t always produce the effect the company is looking for.

To make the color accessible when used on light backgrounds, The Branded Group uses hex #5FA630 and bolds the text in headings. That gives it a 3.1 color contrast, which passes the requirements for large text.

The difference is subtle. In fact, in some places on the website, the main green brand color sits right next to the accessible brand color for ornamentation and text. If you didn’t know what you were looking for, you would never notice the differences in the colors. But the brand color helps the ornamentation pop, while the accessible color makes the text readable (see example below).

HealthWell Foundation

Much like The Branded Group, HealthWell Foundation has a main brand color that is not accessible. The reddish orange in its logo is hex #D35641. For standard text on the website, this just misses the mark of the required 4.5 contrast ratio at 3.85.

To make the color work for text on the website, HealthWell Foundation adjusts that color to hex #CA422D. Once again, the difference is extremely subtle and if you didn’t know it was there, you probably wouldn’t notice the difference.

A great side-by-side of the standard brand color and the accessible brand color is visible on the homepage infographic section where the icons feature the main brand color, and the text is in the accessible color.

Why Color Ratios Matter in Website Accessibility

So why should you care about website accessibility? Making your website navigable for anyone — regardless of whether their needs are permanent, temporary, or situational — helps your brand be inclusive for everyone.

Web Accessibility shows you care and helps you avoid litigation for lack of accessibility in case of a lawsuit. Quite frankly, it’s the right thing to do. But it also improves user engagement for everyone, boosts your SEO, and your bottom line.

At Design Positive, we help brands make new friends by improving user engagement, clarifying your marketing messages, and, of course, doing it all in an access-to-all approach.