What to Do When a Brand Color Is Hard to Use: How to Adapt It for the Web
A brand color may work perfectly well in a logo but become difficult to use for web text or buttons. When that color is already fixed in a logo and printed materials, changing it without approval may not be an option. You can still make the interface usable by keeping the official color in designated places and selecting other colors for text and controls. Here is a practical example based on a fictional craft market’s vendor application page.
Separate the fixed brand color from the colors the interface needs
A brand color is a color used consistently to help people identify a business or service. First check the logo specifications and any brand-use rules to learn which parts may be changed. Even if the logo must use an exact color, body text, application buttons, and form borders do not all have to use that same value.
Describe the problem by location: the brand color is too faint for text on white, white letters on a brand-colored button are hard to read, or form fields disappear against a pale surrounding surface. Test actual foreground and background combinations rather than judging by the color’s name. HEX, a format that describes colors with a # sign and six hexadecimal digits, makes the values easy to record consistently.
If the original color cannot be adjusted, preserve it in the logo or a short information band, and choose a separate functional color for interactive elements. Do not present this new button color as an officially approved replacement for the brand color. Record it under a specific role, such as “application button” or “link.”
Example: keep the original color on a craft market application page
Suppose the market’s printed poster and logo use the exact yellow-orange #F3BD66. Placing normal-sized white text #FFFFFF on that color gives a contrast ratio (a measure of the difference in relative luminance between two colors) of about 1.71:1. Keep the information band’s original yellow-orange #F3BD66, but use dark blue-gray lettering #24303B, which contrasts with it at about 7.87:1. The fixed brand color stays unchanged; only the text pairing changes.
- Information page and application form: Use a warm off-white #FAF8F3 for the page, white #FFFFFF for the form panel, and dark blue-gray #24303B for headings and body text. Text contrast is about 12.68:1 on the off-white and 13.45:1 on the white panel.
- Apply button and links: Give the primary button a deep blue-green background #195C72 with white text #FFFFFF, providing about 7.46:1 text contrast. The button contrasts with the surrounding off-white #FAF8F3 at about 7.03:1. Use the same deep blue-green #195C72 for text links, but underline those links so color alone is not the only cue.
- Inputs and application status: A gray border #64717A around a white #FFFFFF input area has a contrast ratio of about 5.02:1. Mark a selected vendor space with the word “Selected” and a closed application with “Applications closed,” rather than relying on a yellow-orange fill to communicate their states.
Note that the white #FFFFFF form panel and the off-white #FAF8F3 page background differ by only about 1.06:1. If the boundary of the form is important, reinforce it with a heading, spacing, and, where needed, an adequately contrasting border. Separating brand recognition from functional cues makes it possible to keep the approved logo color while improving the page’s usability.
Review brand requirements and usability separately after the changes
Maintain a list of role-based colors such as “fixed brand color,” “background,” “body text,” “primary action,” and “input border,” together with the screens where each is used. Check that the same action does not change color unnecessarily between a promotional page and the application form. Whether you may introduce independent colors for headings and controls depends on the organization’s design rules, so confirm those decisions with the people responsible for the brand.
Under WCAG 2.2 (Web Content Accessibility Guidelines), Level AA generally requires at least 4.5:1 contrast for normal-sized text and at least 3:1 against adjacent colors for non-text visual details required to identify interface controls. Text that forms part of a logotype has a text-contrast exception, but ordinary instructions and button labels do not inherit that exception merely because they use a brand color. Also test keyboard focus indicators and the layout on mobile screens.
HueRoll lets you enter HEX colors, examine related color suggestions, and compare a selected color against white and black. It cannot compare arbitrary color pairs or automatically judge WCAG AA or AAA compliance. The contrast ratios for the combinations in this example were calculated separately.