What to Do When a Brand Color Does Not Have Enough Contrast: How to Adjust It for the Web

A brand color may look appropriate in a logo but lack contrast when it becomes the text or background of a website button. That does not mean the original brand identity must be redesigned. Start by assigning separate roles to text colors, button surfaces and outlines, and decorative brand accents. Using a fictional subscription-delivery booking website with a bright turquoise brand color, this article shows how to improve accessibility while retaining the original hue wherever practical.

Find out whether the problem is text or a control boundary

A contrast ratio measures the difference in relative luminance between text or interface elements and adjacent colors. Under WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for making web content accessible), Level AA generally requires at least 4.5:1 for normal-sized text and 3:1 for qualifying large text. Visual boundaries needed to identify interactive controls generally need at least 3:1 contrast against adjacent colors. Check the text and non-text requirements separately rather than declaring an entire color palette compliant at once.

Suppose the original brand color is bright turquoise ■#38C9B5. White lettering ■#FFFFFF against it reaches only about 2.06:1 contrast, below the requirement even for qualifying large text. Switching to dark blue-gray lettering ■#162F36 on the same turquoise raises the ratio to approximately 6.82:1. Text that is part of a logo or logotype has a contrast exception, but that exception does not extend to ordinary paragraphs, links, or button labels simply because they use the brand color.

Using the turquoise ■#38C9B5 as link text against a white page ■#FFFFFF also provides only about 2.06:1. Identify the actual background and the purpose and size of the words before deciding what needs to change.

Keep the original brand color with three targeted adjustments

First, keep the original turquoise as a button background but change its text. For a “Schedule Delivery” button, the turquoise ■#38C9B5 with dark blue-gray text ■#162F36 provides approximately 6.82:1 contrast. However, the button surface differs from the surrounding white page ■#FFFFFF by only about 2.06:1. If the button’s boundary is needed for identification, give it a dark-teal outline ■#0E655C. The outline contrasts with the turquoise ■#38C9B5 by about 3.36:1 and with white ■#FFFFFF by approximately 6.92:1. A recognizable shape and spacing provide additional cues.

Second, change only the surfaces that must carry white letters to a darker brand-related color. A dark-teal button ■#0E655C with white lettering ■#FFFFFF reaches approximately 6.92:1. The brighter original turquoise ■#38C9B5 can stay in the logo and decorative accents rather than being replaced throughout the site. The same dark teal ■#0E655C also provides about 6.92:1 as link text on white ■#FFFFFF. Add an underline to inline links in their normal state, so color is not the only cue that they can be activated.

Third, use a pale mint-turquoise surface ■#E8F9F5 for longer explanations with dark blue-gray text ■#162F36. This pair has approximately 12.92:1 contrast. The pale panel ■#E8F9F5, however, differs from the surrounding white ■#FFFFFF by only about 1.09:1. Do not depend on that subtle difference to identify an input field or another important interactive boundary. Where a visible outline is necessary, dark teal ■#0E655C has approximately 6.36:1 contrast with the pale background ■#E8F9F5.

Review interaction states before approving additional brand colors

If brand guidelines specify an exact original color, keep that reference and document separate supporting colors for text, surfaces, buttons, and outlines. Do not stop after finding a darker variation: inspect what happens when someone hovers with a mouse or navigates by keyboard. For example, a thick blue-gray focus indicator ■#2B5260—an outline showing where keyboard input will go—has about 8.47:1 contrast against white ■#FFFFFF and 4.11:1 against the original turquoise ■#38C9B5. Change its thickness or spacing as well, rather than relying on color alone to indicate the active control.

HueRoll lets you enter a HEX code (a hexadecimal color value), examine shades (darker variations of a base color), and compare a selected color against white or black. It cannot directly compare arbitrary color pairs or automatically judge WCAG AA or AAA compliance. Calculate the colors that actually touch each other separately, then check the finished design on smartphones and after changing backgrounds. Meeting numerical contrast thresholds and making the overall site easy to use are related but separate checks.