How to Create a Color Scheme That Balances Brand Guidelines and Accessibility

TIPS

A brand’s official colors may look distinctive in a logo but be difficult to read when used for ordinary website text or buttons. That does not mean the brand colors should be changed without permission. A more useful approach is to distinguish fixed brand elements from interface colors that must meet readability and interaction needs. This guide explains how to assign those roles, apply a practical palette, and review both accessibility and brand approval before publishing.

Separate fixed brand colors from functional interface colors

Begin by reading the brand guidelines. Identify required logo colors, approved background combinations, permitted supporting colors, and restrictions on modifying the palette. Preserve the specified identity elements while assigning separate roles to body text, links, buttons, and form fields. Also check whether darker variants are already approved or would require sign-off. A darker color does not automatically become an authorized brand color just because it resembles the original.

The Web Content Accessibility Guidelines (WCAG) 2.2, which describe requirements for making web content accessible, generally require a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text at Level AA. A contrast ratio compares the relative brightness of adjacent colors. Visual information needed to recognize interface controls or understand meaningful icons generally needs at least 3:1 against neighboring colors. Purely decorative graphics do not always carry that requirement.

Text that forms part of a logo or logotype is exempt from the text contrast requirement. This exception does not extend to ordinary page headings, descriptions, or button labels merely because their colors come from a brand palette. Selected states and error messages should also use text, shape, or another clear cue rather than color alone.

Example: keep an orange brand color while improving a sign-up path

Imagine a website for a local delivery service whose hypothetical brand guidelines specify a bright orange #F97316. Its contrast against white #FFFFFF is about 2.80:1, so white normal-sized text on an orange button would not meet the 4.5:1 requirement. The same orange can remain in a logo or decorative stripe where its exact appearance is important. If words must appear on the orange surface, pairing it with dark text #1F2937 produces about 5.24:1, providing another option without changing the orange itself.

The following sample assumes that the brand owner has approved a darker functional color alongside the fixed orange. The identity color stays in a small decorative area; readable text and interactive colors are assigned separately.

Fixed brand color: Bright orange #F97316 for the upper stripe and a small decorative mark, not as the sole indication of meaning.
Surface and body text: Soft ivory #FFF7ED with dark blue-gray #1F2937 for the broad background and the primary information.
Supporting text: Slate #475569, visually less prominent but still distinguishable from the ivory surface.
Main action: An approved dark burnt orange #9A3412 with white #FFFFFF lettering, changing to #7C2D12 on hover.

<section class="delivery-intro">
  <span class="delivery-intro__mark" aria-hidden="true"></span>
  <p class="delivery-intro__eyebrow">Local delivery service</p>
  <h2>Explore your delivery options</h2>
  <p>Check delivery areas and fees before signing up.</p>
  <a class="delivery-intro__cta" href="/plans/">Explore the plans</a>
</section>

.delivery-intro {
  --brand-fixed: ■#F97316;
  --action-color: ■#9A3412;
  padding: 28px;
  border-top: 8px solid var(--brand-fixed);
  background-color: ■#FFF7ED;
  color: ■#1F2937;
}
.delivery-intro__mark {
  display: block;
  width: 48px;
  height: 6px;
  background-color: var(--brand-fixed);
}
.delivery-intro__eyebrow { color: ■#475569; }
.delivery-intro__cta {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  background-color: var(--action-color);
  color: ■#FFFFFF;
  text-decoration: underline;
}
.delivery-intro__cta:hover {
  background-color: ■#7C2D12;
}
.delivery-intro__cta:focus-visible {
  outline: 3px solid var(--action-color);
  outline-offset: 4px;
}

The CSS separates --brand-fixed from --action-color. These are CSS custom properties, often called CSS variables: named values that can be reused across declarations. Keeping the roles separate means changes to the fixed brand color do not silently determine the button’s readability. The :hover selector applies when a pointer rests over the link, while :focus-visible provides an outline for navigation such as keyboard input. The /plans/ address is a placeholder to replace with the real destination.

Review brand approval and contrast together before release

Against the ivory background #FFF7ED, dark body text #1F2937 has a contrast ratio of approximately 13.83:1, while the slate supporting text #475569 reaches about 7.14:1. White lettering #FFFFFF on the main button’s burnt-orange background #9A3412 measures about 7.31:1, increasing to about 9.37:1 against the darker hover color #7C2D12. These all exceed the 4.5:1 WCAG minimum for normal-sized text. The focus outline #9A3412 against surrounding ivory #FFF7ED reaches about 6.88:1, above the relevant 3:1 non-text contrast requirement for essential visual indicators.

If the darker burnt orange is not approved, do not introduce it without authorization. Use an allowed neutral action color instead, or request approval for an additional palette entry. For instance, a dark blue-gray #1F2937 button with white #FFFFFF text reaches about 14.68:1. This keeps a usable action available while the original brand color can remain in the logo and decoration. If you choose the neutral alternative, review its hover and focus states separately as well.

Before publishing, compare the approved palette with the actual usage rules: which color appears in each role, its foreground-background pairing, and what happens on hover or keyboard focus. Keep written labels or other cues wherever color signals meaning. Check the design on mobile and in any light or dark modes that the site supports. The calculations above apply to the specified pairs only; they do not prove that an entire website conforms to WCAG.

HueRoll can help explore related-color candidates and show the contrast between a selected color and white or black. It does not automatically compare arbitrary pairs or assign WCAG AA/AAA conformance grades. Use it to shortlist colors, then test the actual adjacent colors in the finished interface with an appropriate contrast checker.