How do you keep brand colors readable on a business website?

A gold heading can look rich on a dark homepage and nearly disappear when reused on a white service page. The brand color has stayed the same. Its surroundings have changed.

For a small business in Tacoma or University Place, a useful website palette needs instructions about where each color belongs. A customer should be able to read the service explanation and recognize the inquiry button while still getting a clear sense of the business’s style.

Start by assigning colors to jobs, then check the combinations on real page elements. The examples below use an invented palette. They are planning examples, not measurements of Umanifest or any client website. The cover is Umanifest’s existing AI-generated brand artwork, used here to illustrate a blue-and-gold visual direction.

Give each color a job

Take a screenshot of your homepage and one service page. Mark the places where people read, act, or simply take in the atmosphere.

Reading includes service descriptions, captions, navigation, and form instructions. Actions include the quote link, a selected service choice, and the button that sends an inquiry. Atmosphere includes background shapes, decorative lines, and other details that do not carry essential information.

Write down a foreground and background for each job. For example, a hypothetical contractor might use dark navy paragraphs on white, white navigation on navy, and gold for selected headings on dark surfaces. That leaves room for gold decoration on a light section without making customers read a paragraph in it.

A palette handoff should name the intended use as well as the color value. “Gold accent” leaves too much open to interpretation. “Gold headings on navy; navy body text on white” gives the next person a workable rule.

Check color pairs with the actual text size

WCAG 1.4.3, Contrast Minimum, is a Level AA criterion. It sets a minimum ratio of 4.5:1 for ordinary text and 3:1 for qualifying large text, with defined exceptions. Placeholders and text in hover or focus states also need attention.

WCAG’s large-text definition starts at 18 points regular or 14 points bold, equivalent to 24 CSS pixels regular or about 18.67 CSS pixels bold. A heading’s name in the editor does not determine which threshold applies; its delivered size matters.

Use a contrast checker that accepts foreground and background values. Assess the unrounded result against the relevant threshold. A result just below 4.5:1 does not pass by rounding up. Thin lettering can still be difficult to read even when its chosen colors meet the numerical threshold.

Logo exceptions do not extend to ordinary service headings, paragraphs, or button labels simply because they use brand colors. Keep your body text comfortably readable before worrying about whether an accent looks exactly like the printed business card.

Work through a gold-and-navy example

Here are four independently calculated combinations for an illustrative palette, using the relative-luminance formula in WCAG 2.2. The displayed ratios are rounded to two decimal places; the underlying calculations were assessed without rounding.

• Gold #D8B76A on white #FFFFFF: 1.93:1. This pair falls below both text thresholds.
• Gold #D8B76A on navy #101C30: 8.86:1. This pair exceeds the normal-text contrast threshold.
• White #FFFFFF on navy #101C30: 17.06:1. This pair also exceeds the normal-text threshold.
• White #FFFFFF on blue #145EA8: 6.57:1. This gives another possible text-and-surface combination.

These are opaque, solid-color calculations. They do not account for transparency, photographs, gradients, font rendering, or the rest of an interface. They establish only the stated pairs’ contrast ratios.

For the hypothetical contractor, keep gold text on the navy section. On a white section, use navy for the same heading and reserve gold for decoration. The business keeps its palette while changing how it is applied. Making pale text larger will not solve a pair that remains below the large-text threshold.

Check the parts customers need to recognize

A readable label and a recognizable control are related checks. Look at form fields, checkbox marks, selected options, and meaningful icons as well as their words.

WCAG 1.4.11, Non-text Contrast, is Level AA. Visual information needed to identify active controls and their states generally needs 3:1 contrast against adjacent colors, subject to the criterion’s exceptions. Meaningful graphics are also covered.

This does not require every decorative border to reach 3:1. A text-labeled button may be identifiable without a visible outer boundary. An input whose boundary is the only way to recognize the field needs that boundary checked. Evaluate applicable states against their surroundings; this criterion does not require a hover color to contrast 3:1 with the default color it replaces.

As a practical review, place an empty inquiry form beside a completed one. Can someone locate the fields, see the selected choices, and tell which action is available? Ask the designer to document the relevant color pairs for those components rather than approving only a homepage mockup.

Make meaning visible beyond hue

A red border alone leaves some visitors guessing what went wrong. Put a specific visible message beside the field, such as “Enter an email address,” and associate it with the field in the implementation.

WCAG 1.4.1, Use of Color, is Level A. Color must not be the only visual way information is communicated. A visible label, shape, or other suitable distinction can provide another cue; screen-reader-only wording does not replace a missing visible alternative.

For a hypothetical landscaping inquiry, show a checkmark and “Selected” on the chosen service rather than changing only its color. Underline links within paragraphs so readers can recognize them without identifying a particular blue. Keep the colors as part of the design, with visible cues that explain what they mean.

Test the background where the words actually land

A photograph can contain dark trees, a bright sky, and reflective windows in the same crop. A text color that works over one area may fail over another. A phone layout may move the words onto a different part of the image.

Check every delivered crop and responsive layout where the text appears. If the image cannot reliably support the words, put the copy on a sufficiently opaque surface or move it beside the photograph. A shadow that looks dramatic is not evidence of adequate contrast.

Review gradients and animated effects across the areas and moments that sit behind text. Keep essential instructions away from decorative shimmer when that makes them harder to read. Our guide to websites with less motion covers another part of this design decision.

Leave a short set of rules for future updates

Before approving a redesign, ask for a small color-use record containing:

1. Approved text-and-background pairs, with their calculated ratios and intended text sizes.
2. Form and button examples showing default, focus, selected, and error states where applicable.
3. Instructions for text over photos, including the phone crop.
4. Visible cues for links, selections, and errors that do not depend on hue alone.
5. A named person responsible for checking new sections against those rules.

Then try one ordinary update: add a new service description, its image, and an inquiry link using the documented choices. If the rules are hard to follow, simplify them before someone has to improvise under a deadline.

These checks help evaluate color use; they do not establish whole-site accessibility conformance. Bring your palette, screenshots, and the places where reading becomes difficult to a brand visuals and website design discussion. That gives the redesign a concrete starting point while preserving the character you want customers to recognize.