Designing Brand Color for Accessibility Without Losing Identity

Accessibility Is Not the Enemy of Aesthetics

I've heard designers complain that accessibility requirements kill their color work. A specific brand blue that fails contrast ratios. A color combination the brand has used for years that doesn't pass WCAG. The implication is that accessibility and good design are in tension.

They're not. The tension is between good design and lazy design that happens to have accessibility problems. Fixing those problems requires more craft, not less color ambition.

What Contrast Requirements Actually Say

WCAG contrast requirements specify minimum contrast ratios between text and background. For normal text (below 18pt or 14pt bold), the minimum is 4.5:1 for AA compliance. For large text, it's 3:1.

These ratios apply specifically to text on backgrounds. They don't directly restrict which brand colors exist in the palette — they restrict which color combinations can be used for text.

This is a crucial distinction. A brand can have a light yellow in its palette. That yellow can't be used as a text color on a white background. But it can be used as a background color, a graphic element, an illustration element. The color isn't banned — the specific text-on-background combination is.

Testing Palette Combinations

When I build a brand palette, I test every combination that might be used for text. Primary color on white. White on primary color. Primary color on secondary color. Text color on every background color.

I use a contrast ratio calculator and document which combinations pass at which WCAG levels. This becomes part of the brand guidelines — not just "here are the colors" but "here are the combinations that are approved for text use."

Most palettes produce several combinations that fail. My goal is to have enough passing combinations that the system can function without always reaching for black text on white background.

Adjusting for Compliance

When a desired combination fails, I have several options:

Adjust the lightness — making a color slightly darker or lighter can improve its contrast ratio significantly without changing its fundamental character. A brand blue that fails at its original value might pass at a marginally darker or lighter value that's still recognizably the same blue.

Use the color for non-text purposes — accept that the color works beautifully as a background, graphic element, or illustration, but isn't appropriate for text. Design the system around that constraint.

Create a dark/light pair — develop a dark version of the brand color for use on light backgrounds and a light version for use on dark backgrounds. Both read as the same brand color while meeting contrast requirements in their respective contexts.

The Difference Between Required and Recommended

WCAG AA compliance is the standard for most professional digital work. WCAG AAA is more stringent and appropriate for contexts where accessibility is particularly critical.

Print work has different considerations — printed accessibility guidelines are less codified than digital ones, but the underlying principle (sufficient contrast for comfortable reading) applies.

I design for AA as the floor, not the ceiling. Where it's practical to do better, I do better.

Making It Part of the System

The most effective thing I do for accessible color in brand systems: I specify text-color assignments in the guidelines rather than leaving them to individual judgment.

"Use dark navy on light backgrounds. Use white on dark backgrounds. Use medium gray for secondary text on white backgrounds." When the color combinations are prescribed, there are fewer opportunities for someone to inadvertently use a non-compliant combination.

Good systems make the accessible choice the obvious choice.