The accessible colour palette and the distinctive colour palette are usually drawn as opposites. They do not have to be. Most brands that collapse into a generic blue-and-grey palette under accessibility pressure did so because the brand team treated WCAG contrast as a checklist applied after the palette was chosen, rather than as a constraint that shaped the palette from the start. The work is to design distinctive palettes that pass the constraints by construction, not by retreat.

Why so many brand palettes collapse under accessibility pressure

The pattern is familiar. A brand identity is launched with a distinctive palette — perhaps a mid-tone teal, a warm grey, an unusual mustard accent. Six months later, the product team is failing accessibility audits because the teal does not pass contrast against the warm grey at body-text sizes. The fix that goes in is rarely "redesign the palette under contrast constraints." The fix is "darken the teal until it passes." After a few rounds of this, the palette has lost its distinctive character. The teal is closer to a navy. The warm grey is closer to a pure grey. The mustard accent has been replaced with something less risky. The brand has settled into the category default not by choice but by drift. The drift happens because the accessibility constraint was treated as something to satisfy after the fact rather than as a design input from the start. A palette designed with contrast as a constraint from the first sketch holds its character. A palette retrofitted into contrast compliance loses character with each retrofit.

WCAG contrast as a design input, not a checklist

WCAG 2.1 AA requires a contrast ratio of 4.5:1 for normal-size body text and 3:1 for large text and graphical objects. AAA tightens these to 7:1 and 4.5:1. These are the operational constraints for an accessible palette. The mistake teams make is to treat them as filters applied to a palette already chosen; the better practice is to treat them as the geometry within which the palette is designed. The geometry, expressed plainly, is this. Every colour the brand uses for text needs to clear 4.5:1 against every surface it will sit on. Every colour the brand uses for an interactive element or a meaningful graphical object needs to clear 3:1 against its background. The palette has to be designed so that these combinations are possible at the contrast ratios required, with enough headroom to absorb the variations that real-world rendering introduces. Designed in this order, the constraint is generative rather than restrictive. The team starts with the contrast geometry and chooses colours that occupy it interestingly, rather than choosing colours that look nice in isolation and discovering they do not work together. The palettes that result are usually more characterful than the palettes that emerge from aesthetic-first design, because the constraint forces commitment to specific colour relationships rather than vague preferences.

The five-token palette structure

A serviceable accessible palette is usually structured as five tokens rather than as a flat list of brand colours. Surface is the colour the brand puts most of its content on — usually a light or dark base. Ink is the colour the brand uses for body text against the surface — designed to clear 4.5:1 contrast comfortably. Highlight is the brand's primary expressive colour — used for interactive elements, accents, and brand moments, designed to clear 3:1 against surface for graphical use and 4.5:1 for any text use. Secondary is a complementary expressive colour used more sparingly, designed under the same contrast rules. The fifth token is auxiliary — a set of colours used for specific functions: success, warning, error, information. These are constrained by the same contrast rules as the brand colours and by category conventions (red for error is so deeply established that breaking it for brand expression usually fails). This five-token structure works because it forces explicit decisions about role. A traditional brand palette lists six or seven colours without specifying their function; designers and developers then guess which colour belongs where, and the guessing produces the drift towards generic. A role-based palette is harder to drift away from.

How to design for light and dark mode at the same time

Most modern brands need to work in both light and dark mode. The palette that handles this gracefully treats the two modes as one design problem, not two. The surface and ink tokens swap roles between modes — the light-mode surface becomes a dark-mode surface (inverted), and the light-mode ink becomes a dark-mode ink (inverted). The highlight and secondary tokens have to be redesigned for each mode because a colour that passes contrast against a light surface rarely passes against a dark one. The discipline is to design both mode palettes in the same exercise, with the same role structure and the same contrast geometry. A brand whose dark mode is built later, by inverting the light mode and adjusting, tends to feel less considered in dark mode than in light. A brand whose dark mode was designed alongside light mode feels coherent in both. The two palettes will not be mirror images of each other. The light-mode highlight that pops against a warm white might need to shift in chroma to pop against a deep grey. The relationships are what should be preserved, not the specific colour values.

Distinctive without sacrificing accessibility

Distinctiveness in an accessible palette usually comes from three places: an unexpected hue (a colour the category does not default to), a deliberate temperature shift (warmer or cooler than the category mean), and the relationships between the tokens (the specific tension between surface, ink, and highlight). All three are designable under contrast constraints. None of them require accessibility violation to express. A frequent objection is that vivid mid-tones — the colours teams reach for when they want distinctiveness — do not pass contrast. This is true at body-text sizes against the brand's typical light surfaces. It is not true at graphical-element sizes, where the 3:1 threshold is easier to clear. A palette that uses mid-tone highlights for graphical and accent purposes while keeping text on a darker tone of the same hue is fully accessible and visually distinctive. The trick is to plan the use cases for each colour up front, not to apply each colour everywhere and discover the constraints later.

Testing the palette before it ships

Testing should happen at three points. First, during design — every proposed colour pairing should be checked against contrast targets before it leaves the studio. Second, during implementation — every text-on-surface combination in the live product should be checked, including the long-tail combinations that emerge from real content (a coloured tag on a coloured pill on a coloured card, for instance). Third, during ongoing operation — automated contrast checks in the design system catch palette drift before it reaches users. Beyond contrast, the palette should be tested for the most common forms of colour vision difference. Approximately 8% of men and 0.5% of women have some form of colour vision difference; the palette should be designed so that meaning is never carried by hue alone — a status indicator should also have shape or position, an interactive element should also have an underline or weight change. Testing palettes in simulated deuteranopia and protanopia views during design catches the worst failures.

Governing the palette over time

A palette governed well stays distinctive for years. A palette governed badly drifts towards category-default within eighteen months. Governance has three components. The palette tokens live in design tokens (a topic covered in a previous post on design tokens for brand handoff) and are referenced rather than copied across surfaces. Any proposed change to a token goes through a brand-team review against the original contrast and character constraints. New colours added to the palette must clear both contrast rules and a character rationale before they enter the system. The governance is not bureaucratic if the palette was designed well. A well-designed palette gives developers and designers the colours they need for the situations they encounter; the proposal-and-review process is for genuinely new situations, not for routine work. A poorly designed palette generates constant pressure for new colours because the existing ones do not cover the needs.

What This Looks Like in Practice

One of the identity engagements we have done involved a brand whose palette had collapsed into a near-generic navy-and-grey through three rounds of accessibility retrofitting. The work was to redesign the palette from scratch with contrast as a first-class constraint. The exercise produced a five-token palette: a warm off-white surface, a deep slate ink that cleared 4.5:1 contrast against the surface with headroom, an expressive mid-tone teal as the highlight (used for graphical elements and large-text only), a complementary clay as the secondary, and a small set of auxiliary colours for status. Both light and dark mode were designed at the same time. The result was distinctive in a way the previous palette had not been for years, and fully accessible without retrofitting. The palette has held for the eighteen months since shipping, with no drift, because the constraints were in the design rather than applied to it.

Closing

An accessible brand palette is not a generic palette. The collapse to category-default happens when contrast is treated as a checklist after the palette is chosen. Treated as a design input from the start, the contrast geometry produces palettes that are both compliant and distinctive. The structure of five tokens — surface, ink, highlight, secondary, auxiliary — gives the system the discipline it needs to hold over time. Light and dark mode designed together. Testing during design, implementation, and operation. Governance that protects the palette without strangling new work. If your brand palette has drifted towards category-default through accessibility retrofitting, or you are about to commission a new identity and want the palette to hold its character under WCAG constraints, we are happy to walk through what a constraint-led palette design would look like for your brand.