Choosing a Brand Palette That Survives Dark Mode

Most brand palettes are chosen on a white artboard. Then the brand meets a dark website, a dark email client, a dark app, a black tote bag or a matte black box, and the accent colour that looked confident on white turns muddy and illegible.

This is fixable at the palette stage, and it costs nothing to do it right the first time.

Why colours break

Contrast is not a property of a colour. It is a relationship between two.

A mid-tone brand colour can sit comfortably against white and against black while failing to reach the 4.5:1 contrast ratio that body text needs on either. A colour that is bright enough to read on dark is often too light to read on white. That is not a design failure — it is arithmetic, and one colour genuinely cannot always do both jobs.

The mistake is treating the brand colour as a single value that must work everywhere. The fix is to decide, deliberately, what each colour is for.

Separate the roles

Give every colour a job, and the problem mostly solves itself:

Fill colours go behind something else — a button background, a badge, a block. The requirement is that the text on top of them passes contrast. A mid-tone works well here.

Ink colours are used as text or icons on a background. These are the ones that break, because they need contrast against the surface behind them.

Surface colours are backgrounds. They need enough separation from each other to define cards, sections and inputs.

Once split, it is completely reasonable for the ink version of your brand colour to be a slightly different value in light and dark mode. That is not two brands. It is the same brand adapting, exactly as your logo has a reversed version.

The practical method

Pick the fill first. Choose the brand colour you actually want people to see — the one on the buttons and the packaging. This is the identity.

Check white and dark text on it. Whichever passes 4.5:1 is your button text colour. If neither does, the colour is too mid-tone for a fill and needs to shift.

Derive a light-mode ink. Take your brand colour and darken it until it reaches 4.5:1 against white. Often the original already passes — many mid-violets and blues do.

Derive a dark-mode ink. Take the same colour and lighten it until it reaches 4.5:1 against your darkest surface. This is usually a noticeably lighter tint, and that is fine.

Build the neutral ramp deliberately. You need at least: a page surface, a raised surface, a border, a muted text colour and a primary text colour — in each mode. Guessing these is what produces the grey-on-grey body copy that plagues dark themes.

Test the muted text last. It is always the one that fails. The mid-grey that reads beautifully on white is frequently under 4.5:1 on a light grey section, and its dark-mode counterpart is usually too dim.

Gradients need extra care

If your identity uses a gradient, remember that text sitting on it has to pass contrast at both ends, not on average. A gradient running from a mid-tone to a lighter tone will often support white text at the dark end and fail at the light end.

The usual resolutions: use a solid fill for anything carrying small text and reserve the gradient for large display type, borders, glows and decorative fills — or shorten the gradient’s range so both ends behave the same way.

Document the pairings

The single most valuable page in a set of brand guidelines is the one that says which ink is allowed on which surface, in each mode. Not the palette — the pairings.

Without it, someone will eventually put the light-mode accent on the dark surface, it will measure 3:1, and it will ship. With it, the decision is already made and nobody has to think about contrast at all.

A quick audit for an existing palette

For each colour, in both modes:

1. Measure it as text on every surface it might land on.
2. Measure white and dark text on it when used as a fill.
3. Note anything between 3:1 and 4.5:1 — those are the dangerous ones, because they look almost fine and fail anyway.
4. For each failure, decide whether that colour should simply not be used in that role, or whether it needs a mode-specific variant.

Most palettes need one or two adjustments and a documentation page. That is a much smaller job than the rebrand people assume is required when dark mode arrives.

Colour systems with accessible pairings documented for both modes are part of every brand identity project we ship.