Motta Industries Blog

Brand colors carry a lot of weight. A business may have spent real money on a logo, signage and a palette that customers recognize at a glance. So when a designer or accessibility review says “this color combination does not have enough contrast,” it can feel like being told to throw the brand away.

In practice, it rarely comes to that. Contrast guidelines are about how colors are paired and where they are used, not about which colors a business is allowed to own. With a little planning, most palettes can stay recognizable while making text readable and buttons visible for far more people. This article explains what the contrast rules ask for, why they matter, and practical ways to keep both the brand and the customers happy.

Why contrast matters to real customers

Low contrast is one of the most common reasons people struggle to read a website, and it affects more people than many owners expect.

In a 2016 post on why colour contrast matters, the UK Government Digital Service’s head of accessibility noted that around 1 in 12 men and 1 in 200 women have some degree of colour vision deficiency, citing NHS figures. He also pointed out that contrast is not only an issue for those people. The amount of light reaching the back of the eye reduces with age, screens vary widely in quality, and reading in bright conditions is harder because contrast is lower.

Think about who visits a typical small business site: older customers checking opening hours, people reading on a phone outdoors at lunchtime, someone on a cheap laptop with a dim screen. Pale gray text on white, or white text on a light brand color, makes life harder for all of them.

What the contrast rules actually say

The most widely used benchmark is the Web Content Accessibility Guidelines. The WCAG 2.2 Recommendation, published by the W3C in October 2023, includes several criteria that relate to color. In plain terms:

Text contrast (Level AA). Normal text should have a contrast ratio of at least 4.5:1 against its background. Large text, defined as at least 18 point, or 14 point bold, needs at least 3:1.

Non-text contrast (Level AA). The visual parts needed to identify interface components and their states, such as button edges, form field borders and focus indicators, and parts of graphics needed to understand content, should have at least 3:1 contrast against adjacent colors.

Use of color (Level A). Color should not be the only visual way of conveying information, indicating an action, prompting a response or distinguishing an element.

Enhanced contrast (Level AAA). A stricter level asks for 7:1 for normal text and 4.5:1 for large text. Most organizations aim for AA rather than AAA across a whole site.

Contrast ratio is calculated from the relative brightness of the two colors and ranges from 1:1, for identical colors, to 21:1, for black on white. You do not need to do the math by hand. Free contrast checkers calculate it from two color codes.

The logo exception, and what it does not cover

One detail reassures many business owners. WCAG’s text contrast criterion states that text that is part of a logo or brand name has no contrast requirement. Your logo itself does not have to be redesigned to meet a ratio.

That exception is narrower than it sounds, though. It covers the logo, not every place the brand color appears. Navigation links, buttons, headings, body text and form labels in brand colors still need to meet the contrast criteria. The guidelines also exempt incidental text, such as purely decorative text or text in inactive controls, but the core content of the site is not incidental.

Where brand palettes usually run into trouble

Most contrast problems come from a few familiar patterns:

• White text on a mid-tone brand color. Bright orange, light green, sky blue and yellow often fall short with white text on top. The GDS post gave an example of an orange button with white text at 3.1:1, well below the 4.5:1 minimum, alongside a green button at 4.9:1 that passed.
• Light gray body text. It looks elegant in a design file and is hard to read on real screens.
• Brand-colored links in body text that are too close in brightness to the surrounding text or the background.
• Text over photographs, where contrast changes across the image.
• Thin, light button outlines and form borders that disappear on some screens.
• Status shown only by color, such as red for errors or green for available dates, with no text or icon.

Practical ways to keep the brand and pass the test

Build a role-based palette. Instead of using each brand color everywhere, assign roles. A bright brand color might be used for large shapes, illustrations, backgrounds behind dark text, or accents, while a darker shade of the same hue handles links and button backgrounds behind white text.

Create tints and shades. Most brand colors can be extended into a family, from very light to very dark, that still feels like the brand. The darker members of that family often pass contrast with white text; the lighter ones often work as backgrounds behind dark text.

The U.S. government’s design system offers a useful model. When Digital.gov introduced USWDS 2.0 in April 2019, it described an accessible color system in which each color has a numeric grade. The difference between two grades, which the team called the magic number, predicts contrast: 40 or more for AA large text, 50 or more for AA, and 70 or more for AAA. The post said this approach encourages accessible color choices for a mission and brand. A small business can borrow the idea by organizing its own palette into graded steps and recording which pairings pass.

Swap foreground and background. If white text on a bright yellow fails, dark text on that same yellow may pass comfortably, keeping the color front and center.

Use the brand color for size, not detail. Large headings, banners and graphic blocks can carry a bright brand color more easily than small body text can, because large text has a lower threshold and decorative shapes have no text requirement.

Add a second cue. Underline links in body text, add icons and labels to status messages, and use text such as “required” rather than color alone, which also satisfies the use-of-color criterion.

Put a solid layer behind text on images. A dark overlay or a solid panel keeps contrast stable regardless of what the photo shows.

Test properly, not just by eye

It is tempting to judge contrast by looking. The GDS post warned against relying only on a visual check. It can find obvious problems, but vision differs between people, and even good eyes can be fooled by surrounding colors and shadows. The author illustrated this with a well-known optical illusion in which two squares that look clearly different are exactly the same shade.

A simple testing routine:

1. List your actual color pairs, such as body text on background, link color on background, button text on button color, and border on background.
2. Check each pair with a contrast checker and record the ratio.
3. Mark which pairs pass for normal text, large text and non-text elements.
4. Review real pages on real devices, including a phone outdoors and an older laptop.
5. Check states, such as hover, focus and error, which often use different colors.

Store the results in a short style guide so anyone editing the site uses approved combinations. Repeat the check whenever a new color, campaign graphic or seasonal theme is introduced, since one-off promotions are a common source of unreadable banners and buttons that slip past review.

A fictional example

Imagine a garden center, invented for this example, whose brand color is a bright leaf green. Its website uses that green for every button, with white text, and for links in body copy. A contrast check shows the white-on-green buttons fall short of 4.5:1, and the green links are hard to pick out from dark gray text.

The fix keeps the green front and center. The designer creates a deeper shade of the same green for button backgrounds, which passes with white text. The bright green moves to large banner shapes, icons and section backgrounds behind dark text. Links in body copy become the deeper green and gain underlines. The logo stays exactly as it was. Customers still see a green brand; they can simply read it more easily.

Common objections

“Darker shades will look dull.” Usually only a few pairings change, and bright colors remain for large areas.

“Our competitors use light gray text.” Popularity does not make it readable, and your customers are the ones squinting.

“We will fix it in the redesign.” Adjusting a handful of color values is often a small change.

Do not forget mobile and dark mode

Contrast that passes on a desktop monitor indoors can still be hard to read on a phone in sunlight, as the GDS post’s point about bright conditions suggests. Meeting the ratio is the minimum; a little extra margin helps. If your site or app offers a dark mode, test those pairs separately, because a brand color that works on white may fail on a dark background. Consistent palettes across screen sizes are part of good responsive designs.

Working with designers and printers

Brand guidelines are often written for print, where colors behave differently. If your guide lists only a few print colors, ask your designer to add a web section with tested color codes, approved text and background pairs, link and button styles, and focus and error colors. That section becomes the reference for anyone who builds pages, landing pages or emails.

Thoughtful UI/UX design treats contrast as a design constraint from the start, the same way it treats screen size or brand tone. Fixing it at the end is possible, but usually involves more compromise.

A quick checklist

• Body text meets at least 4.5:1 against its background.
• Large headings meet at least 3:1.
• Buttons, form borders and focus indicators meet at least 3:1 against adjacent colors.
• Links are distinguishable by more than color alone.
• Status and errors use text or icons, not just color.
• Text over images has a solid or darkened backing.
• Approved color pairs are recorded in a style guide.

The bottom line

Brand colors and good contrast can coexist. The logo itself is exempt, and most palettes can be extended with darker and lighter shades, assigned clear roles and tested so that text, links and buttons stay readable. The brand stays recognizable, and more customers can actually use the site.

If you would like help testing your palette and building accessible color pairs that still look like you, Motta Industries’ website accessibility team can review your site and recommend practical adjustments.