How to Fix Inaccessible Color Combinations Without Losing Brand Identity

Brand identity is larger than one hexadecimal value

A recognizable brand is built from a system: hue families, typography, shapes, spacing, illustration style, photography, motion, and voice. A single color may be distinctive, but forcing that exact value into every interface role is not what preserves identity. It usually produces inconsistent or unreadable components.

The useful distinction is between a brand asset and a functional token. Keep the core brand color where it performs well. Give demanding jobs—small text, button backgrounds, focus indicators, and form boundaries—to related shades or safer pairings. This is not a compromise of the identity; it is a more mature expression of it.

Diagnose the exact failure before editing color

“Our green is inaccessible” is not a usable diagnosis. A color has no contrast ratio in isolation. Record the complete relationship and context before changing anything:

• The foreground and its final rendered color.
• The adjacent background, including opacity, gradients, or photography.
• Whether the element is normal text, qualifying large text, or a meaningful non-text cue.
• The default, hover, focus, active, selected, disabled, and error states.
• Whether color is the only visual method communicating meaning.

For WCAG Level AA, normal text needs at least 4.5:1. Qualifying large text needs at least 3:1. Many meaningful visual cues used to identify controls, states, and graphical objects also need 3:1 against adjacent colors. A result below the threshold does not pass by rounding.

Decide what must remain fixed—and what can move

Repair is easier when the team names its constraints. The master logo, packaging match, and signature campaign field may need to remain visually stable. Small text, icon fills, button states, supporting surfaces, and component borders are usually more flexible.

Write the decision down. If a signature teal must remain #4EA58F, state that it is the core brand token—not that it must be the background of every button. This prevents later debates from restarting at the wrong level.

Use the least disruptive repair first

There is no single correct way to repair a failing pair. Use a consistent order so the visual system changes only as much as necessary.

1. Change the foreground

This is often the smallest change. Many bright or medium brand backgrounds pair poorly with white but work very well with a dark neutral. The brand field remains untouched, while text and icons become readable.

2. Adjust the background

If white lettering is a strong part of the visual language, darken the brand surface until the full pair passes. Preserve hue direction and tune lightness first. Check the actual value rather than assuming “slightly darker” is enough.

3. Invert or relocate the pair

A color that fails as text on white may succeed as a large background with dark text. Changing hierarchy or placement can solve the contrast problem without changing either color.

4. Add a reliable surface

For text over gradients, video, or photography, place the content inside a solid panel or use a sufficiently opaque scrim whose final rendered contrast has been tested across responsive crops. A shadow or thin outline is rarely a dependable substitute for a stable adjacent color.

Worked example: repairing a teal brand pair

Imagine that #4EA58F is the established brand teal. A designer uses white text on it for calls to action. The pair reaches only 2.96:1. It fails 4.5:1 for normal text and is also just below 3:1, so making the text merely large is not a valid rescue.

Option A keeps the exact brand field and switches its foreground to #172033. Option B keeps the familiar white-on-teal composition but uses the darker #246B5F functional shade for controls. If a 7:1 AAA target is appropriate, white on #175F54 reaches 7.50:1.

The core teal has not disappeared. It remains available for larger fields, illustrations, decorative accents, charts with redundant labels, and controls using dark ink. The two darker relatives handle white text and other functional requirements.

Use the Accessible Color Suggestion Tool to explore nearby candidates while holding one side of the pair fixed, then confirm the chosen production pair in the Color Contrast Checker.

Build brand and functional tokens separately

A tonal scale is useful, but role names make it safe. Designers and developers should not need to remember which numbered teal happens to support small white text. Encode the intended relationship in semantic tokens.

:root {
  --brand-core: #4ea58f;
  --action-background: #246b5f;
  --action-label: #ffffff;
  --text-brand: #175f54;
  --surface-brand-soft: #dff1eb;
  --text-on-brand-core: #172033;
}

The same brand can have different functional mappings in light and dark themes. Treat a dark theme as a new set of adjacent relationships, not an automatic inversion of the light palette.

Repair the complete component, not only its default state

A passing default button can still become inaccessible on hover or keyboard focus. For each component, test the label against its fill and any meaningful boundary, icon, or state indicator against the colors it touches.

• Hover: keep the label readable after the background changes.
• Focus: ensure the focus indicator is visible against adjacent inner and outer colors.
• Selected: use more than a color shift when the state must be identified.
• Error: pair color with clear text or an icon, and test each meaningful cue.
• Disabled: do not make essential instructions needlessly unreadable even where a contrast exception applies.

Avoid building hover colors with arbitrary opacity. The composited result changes with the underlying surface. Prefer an explicit token whose final pair can be calculated, documented, and reproduced.

Preserve meaning when color changes—or cannot change

Contrast repair addresses luminance difference. It does not solve a second issue: color used as the only way to communicate information. If green means approved and red means rejected, add visible labels, icons, patterns, or shapes. If links are distinguished from nearby body text only by color, provide an additional visual cue that satisfies the applicable requirement.

Brand teams often worry that extra cues will clutter the design. In practice, short labels and consistent iconography strengthen comprehension and can become distinctive parts of the visual language.

Handle logos, imagery, gradients, and campaigns carefully

Logo text has a contrast exception, but the surrounding product still needs to work. Do not use the exception to justify faint campaign copy, navigation, or calls to action. Offer a light and dark logo lockup so the approved version can be chosen for each background.

For photography and video, test the least favorable area behind the content. Cropping changes across devices, so a pair that works on desktop may fail on mobile. Solid content panels are more reliable than shadows. When gradients are essential, check every region where text can appear and define safe placement zones.

Turn the repair into a team workflow

1. Record the failing pair and role. Include the calculated ratio, font size and weight, state, theme, and screenshot.
2. Name the protected constraint. Decide whether the exact hue, white lettering, surface, or layout is truly fixed.
3. Generate several nearby solutions. Explore foreground swaps, related lightness values, and surface changes instead of presenting a single forced choice.
4. Compare recognition in context. Review the full page or component, not isolated swatches.
5. Validate every state. Test focus, hover, active, selected, error, disabled, dark theme, and responsive imagery.
6. Document approved pairs. Map semantic tokens to permitted foregrounds and surfaces.
7. Prevent regression. Add token checks where practical and retain human review for color-only meaning and real context.

This workflow gives brand and accessibility reviewers the same evidence. Instead of arguing whether a replacement “looks close,” the team can compare exact roles, ratios, and visual consequences.

Common repairs that do not solve the problem

• Darkening a color by eye without calculating the final pair.
• Rounding 2.96:1 to 3:1 or 4.48:1 to 4.5:1.
• Increasing font weight while still failing the large-text size and weight definition.
• Adding a text shadow over unpredictable photography and testing only one image crop.
• Applying opacity to a token without testing the composited result on every allowed surface.
• Passing the default state while hover, focus, selected, or error states fail.
• Using a logo exception for ordinary branded interface text.
• Changing red and green values but leaving color as the only status indicator.
• Creating an accessible darker shade without documenting when designers should use it.
• Choosing the numerically closest candidate without evaluating brand recognition in context.

Brand-safe contrast repair checklist

Continue the DOFIW color workflow

Start with WCAG Color Contrast Explained if you need the thresholds and exceptions, or follow How to Test an Accessible Color Palette to review the entire system.

Frequently asked questions