anonymous.

How to Choose Brand Colours: Differentiation, Accessibility Contrast, and Cross-Media Reproduction

Choose brand colours by satisfying four constraints in sequence: competitor differentiation, WCAG 2.2 accessibility, cross-media reproducibility, and system extensibility.

How to Choose Brand Colours: Differentiation, Accessibility, and Cross-Media Reproduction

Choosing brand colours is not an act of inspiration. It is an act of engineering. The method that survives contact with a printing press, a phone screen, and a colour-blind customer treats colour selection as a constraint-satisfaction problem, not a meaning-assignment exercise. Four sequential gates stand between a draft palette and a finished one: differentiation, accessibility, cross-media reproducibility, and system extensibility. If you need a repeatable, specification-driven path through how to choose brand colours with accessibility and cross-media reproduction in mind, the workflow below gives you exactly that. No aesthetics. Just a checklist that works at 2 a.m. when the client needs a hex code and the printer needs a Fogra characterization data file by noon.

Gate One: Brand Colour Differentiation Competitor Analysis

Before you pick a single value, run a brand colour differentiation competitor analysis. The mistake most teams make is choosing a colour because it feels unique in a boardroom. Feelings are not data. Pull the primary colours of every serious competitor in your market category, convert them all to hex codes, and plot them as clusters. If your proposed set sits inside a cluster of three rivals that all use the same blue, you have failed the differentiation gate. The swatch looks pretty on a monitor. It does not matter.

Mapping the Competitive Colour Field

Build a small spreadsheet with columns for competitor name, hex code, and dominant hue family. Use a colour-picker tool to extract values from their websites, packaging, and advertising. If a competitor's brand is not digital, request a sample or photograph it under daylight. The point is to map the field, not to admire it. When you see a gap, when every competitor sits in the blue-green range and the market has no warm orange, you have found your territory. That is differentiation by measurement, not by taste.

Do not stop at the primary colour. Look at the secondary sets too. A competitor may use a neutral grey as their workhorse, with a red accent. Your brand can share the neutral grey. That is almost always fine. Your accent must be distinct. A customer should be able to see your ad in a feed of competitors and know it is yours without reading a logo. That only happens when the hex-value clusters do not overlap. If they do overlap, go back and shift the hue, saturation, or lightness until the cluster separation is obvious.

Gate Two: WCAG 2.2 Brand Palette Contrast

The second gate is accessibility. It is non-negotiable. Every colour in your set must achieve a minimum contrast ratio of 4.5:1 against the primary background colour you plan to use for text and UI components, per WCAG 2.2 brand palette contrast rules. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour, both calculated in the sRGB colour space. You do not need to memorise the maths. A contrast checker plugin will do it. You do need to know what you are testing and why the tool can lie.

Why the Checker Alone Is Not Enough

Here is the failure case. A designer runs a contrast checker, sees a passing ratio of 4.6:1, and ships the design. The client opens the same page on a dimmed mobile phone in bright sunlight. The text is unreadable. The checker sampled a saturated antialiased edge pixel, not the actual text colour. The WCAG 2.2 brand palette contrast requirement is a floor, not a licence. Test the actual text colour against the actual background, at the actual rendering size, on a real device. If you are using a tint or shade of your brand colour, a 50% tint, test that too. The contrast ratio changes when luminance changes.

For large text, 18pt or 14pt bold, the threshold drops to 3:1. For UI components and graphical objects it is also 3:1. Do not design to the minimum unless you have to. The enhanced AAA standard is 7:1 for normal text and 4.5:1 for large text. Aim for AAA on body copy. Reserve the AA minimum for large headlines and UI chrome. A set that barely passes at 4.5:1 will fail in the field. Real-world conditions, glare, low brightness, poor display calibration, are always worse than the lab. When in doubt, darken the text or lighten the background. The 60-30-10 rule for colour distribution helps here. Sixty percent dominant, 30 percent secondary, 10 percent accent. It forces you to put the accessible colours in the large areas where they matter most.

Verifying Colour Blindness Safe Brand Palette Choices

Colour blindness is not rare. Approximately 8% of males and 0.5% of females of Northern European ancestry have some form of colour vision deficiency. A colour blindness safe brand palette is not optional. You cannot assume a set is safe because it looks fine to you. You must simulate. Free and paid tools exist that apply a colour blindness simulation filter to your screen, showing you what a deuteranope or protanope sees. Run those simulations before you commit. If two colours that are distinct in your normal vision become indistinguishable under simulation, you have a problem.

Beyond Hue: Redundancy and Simulation

The classic failure is red-green confusion. A brand that uses red for 'stop' and green for 'go' is a cliché, and it fails hard for the 8% who cannot tell them apart. The fix is never to rely on hue alone. Use position, shape, or pattern as a redundant cue. A red square and a green circle are fine. A red square and a green square are not. In your set, this means checking that every pair of colours that will appear together, especially in charts, buttons, and status indicators, differs in lightness or saturation, not just in hue. A tool that simulates deuteranopia, protanopia, and tritanopia is not a luxury. It is a gatekeeper. Feed your full set through it. Reject any combination that fails.

One trap is the assumption that a set with high contrast in greyscale is automatically safe. Greyscale conversion is a useful proxy, but it is not the same as simulation. Two colours can have identical lightness yet different hues. They will pass a greyscale test but fail under colour blindness. The simulation tools handle this correctly because they model the actual cone responses. Use them. Document the result. Include the simulation screenshots in your brand guidelines, so the next person who extends the set knows what was tested and why.

Gate Three: CMYK RGB Brand Colour Specification

The third gate is cross-media reproducibility. A screen colour and a printed colour are not the same thing. On screen you are using the additive RGB colour model, where red, green, and blue light combine to create colours. On paper you are using the subtractive CMYK model, where cyan, magenta, yellow, and black inks absorb light. The two have different gamuts. The CMYK gamut is smaller in saturated blues and greens, though larger in some cyans and yellows, so a saturated screen blue will print as a muddy, desaturated version of itself. This is the claimed-vs-real print colour match failure.

The Screen-to-Print Breakdown and How to Prevent It

Here is how it goes wrong. A designer approves a design on a high-end monitor, sees a brilliant blue, and sends the file to a print shop. The printed piece comes back 15% darker and shifted toward magenta. Why? The file was assembled in an uncalibrated sRGB workflow. The printer expected a Fogra 39 characterisation for coated paper. The screen proof did not predict the printed result because there was no soft-proofing with the correct ICC profile under ISO 3664 D50 viewing conditions. The fix is not to trust your eyes. It is to specify the colour in CMYK RGB brand colour specification terms, converting with a rendering intent and soft-proofing the result.

For every colour in your set, you need three specifications. The first is the hex code, the screen reference in the sRGB colour space and the practical standard for the web. The second is the CMYK value, but not a bare one: you must name the output intent, such as Fogra 39 for coated stock or GRACoL for the North American market. A CMYK value without an ICC profile is meaningless. The third is the spot-colour reference, and here is the warning: the physical swatch is the only durable reference. Adobe's 2022 licensing change removed preloaded spot-colour books from design software. You cannot assume the book is in the picker. The physical swatch from the matching system is a pre-mixed single ink. It is the only one of the three that survives the transition from screen to press without gamut clipping.

Spot-Colour Brand Reference in a Post-Adobe World

The spot-colour brand reference is not a nice-to-have. It is the anchor of your print workflow. The Pantone Matching System contains 2,390 spot colours across coated and uncoated formulas. When you specify a Pantone 185 C, a print shop anywhere in the world can mix that exact ink without guesswork. Process colour, CMYK, can only approximate that spot colour on a good day, and the approximation gets worse on uncoated stock. If your brand's primary colour is a signature red, and that red is a spot colour, your packaging, your business cards, and your signage will all match. Rely on a screen value alone and you are gambling with your brand's consistency.

What Changed and What Still Works

The landscape shifted. Since Adobe's 2022 licensing change removed preloaded spot-colour books from Photoshop, Illustrator, and InDesign, many designers have discovered the books are simply gone. The software now shows a 'Pantone Connect' plugin, but the physical swatch booklet is the only durable reference. If you are building a brand set today, buy the physical fan deck. It costs money. It takes up shelf space. It is worth every cent. Do not use a third-party website that claims to show 'PMS 185 C' unless you can verify it against the physical book. The screen representation of a spot colour is a lie by default. A spot colour is defined by its ink, not by its RGB display.

When you document your set, specify all three values: hex for screen, CMYK with a named output intent (Fogra 39, GRACoL, or similar) for process printing, and the spot-colour reference for spot-colour production. State clearly in your brand guidelines which one is authoritative for which medium. For screen, the hex is fine. For a one-colour logo on a T-shirt, the spot colour is non-negotiable. For a four-colour brochure, the CMYK with the ICC profile is what the printer needs. Skip this gate and you will spend your career chasing colour mismatches. Do it once and you will never look back.

The Mechanics of Soft-Proofing and Viewing Conditions

Soft-proofing is the process of simulating on a monitor what a printed piece will look like, using an ICC profile of the output device and the ISO 3664 D50 viewing condition standard. ISO 3664 specifies the lighting under which printed colour must be evaluated, a standardised D50 light source. Human colour perception is wildly inconsistent across different lighting. What looks like a true red in a warm tungsten-lit office will look orange under a cold fluorescent tube. If you are going to approve a print proof, view it under D50 lighting. If you are soft-proofing on a monitor, the monitor must be calibrated to D50, too.

The claimed-vs-real failure here is instructive. A designer soft-proofs a file and sees a perfect match on screen, then sends it to press and the result is off. The cause is usually one of three things: the monitor is not calibrated, the ICC profile is wrong, or the viewing booth has the wrong lighting. A soft-proof is only as good as the profile and the display it runs on. A laptop screen that has never been calibrated is not a proofing device. It is a guess. Use a hardware calibrator, set the white point to D50, and use a viewing booth for print. This is not a luxury for agencies. It is standard practice for anyone who has signed off a print job and received a surprise.

Gate Four: System Extensibility and Neutral Scale

The fourth gate is system extensibility. A brand colour set is not just three accent colours. It is a system that includes a neutral scale for text and UI chrome. Most brand guidelines fail here, listing a primary colour, a secondary, and an accent, and then leaving the designer to invent a grey. That is a failure of specification. A neutral scale, a ramp from near-black to near-white, is the workhorse of any interface. It handles body text, borders, backgrounds, and disabled states. Without it, your brand accent colours get used for everything, and the system collapses into a rainbow.

Building and Testing the Neutral Ramp

Define your neutrals with the same rigour as your brand colour. Use a scale of greys in 10% increments, from 10% to 90% tint, plus pure black and white. Test each neutral for contrast against your primary background. A common approach is to use a neutral ramp that shares the undertone of your brand: cool greys if your brand is blue, warm greys if it is orange. The key is that the neutrals are specified, not improvised. The extended set can include 5 to 10 colours total, including tints and shades of your primary. A tint range of 10 to 90% of the base colour in 10% increments is common practice, as is a shade range that adds black. This is not a formal standard, but it gives you a system that scales from a favicon to a billboard.

When you document the set, specify the hex code for screen, the CMYK plus Fogra or GRACoL for print, and the spot colour for spot-colour production. The neutral scale gets the same treatment. Test the neutrals for accessibility. A light grey on white may look elegant but it will fail a 4.5:1 contrast test. The 60-30-10 rule is helpful here: 60% of the visual field is your dominant neutral, 30% is your secondary, and 10% is your accent. This distribution forces the neutrals to do the heavy lifting, so the accent colour stays special.

The Failure Case: When the Normal Route Is Closed

What do you do when the normal route to a colour fails? The most common failure is the printer rejecting a file because total ink coverage is above 300%. On uncoated stock, ink coverage above that threshold can cause drying failure and set-off. The fix is to lower the ink in the rich black or the dark background. If you are already at the press and the file is live, you have a problem. The answer is to design for the constraint from the start. Set your CMYK max to 300% in the document setup, and soft-proof with the press's ICC profile. If you are already in the weeds, the quick fix is to reduce the black channel and let the CMY do the work, but that changes the hue. The professional move is to re-separate the file with the correct total ink coverage and show the client both versions.

Gamut Clipping and Last-Resort Fixes

Another failure is the RGB-to-CMYK gamut clipping. The screen colour is saturated, but the print is flat. If you are on a deadline and cannot re-spec the colour, you can choose a bolder, less saturated version that stands a better chance of surviving the conversion. Do not expect a match. The correct move is to have specified the spot colour from the start. If you are reading this at 11 p.m. and the file is due at 9 a.m., you have what you have. The best you can do is choose the conversion rendering intent that preserves the most of what you want: perceptual for photographs, relative colorimetric for vector and spot colours. Document the deviation. It will not be the brand colour you wanted, but it will be closer than a blind conversion.

What to Do Differently

Brand colour selection is a specification task, not a taste task. Walk away with a checklist of four gates: differentiate, make accessible, specify for cross-media, and build a neutral scale. That is everything you need. Ignore this and pick a colour because you like it, and you become the client from hell. The designer who enables that is doing no favours. The craft of the brand designer is not in the choice of hue. It is in the documentation of that choice across every production medium.

The Full Approval Workflow

Before you approve a set, run it through the full workflow. Check the competitor clusters in hex space. Run the WCAG contrast ratios for every pair you will use for text and UI. Simulate colour blindness and reject anything that fails. Convert to CMYK with a named Fogra or GRACoL output intent and soft-proof under D50. Buy the physical fan deck and verify every spot colour. Then, and only then, call the set finished. This is not a faster process. It is a more reliable one. It will take an afternoon the first time, and an hour the next. But it is the difference between a brand that looks professional and one that looks like it was made on a laptop in the dark.

When the soft-proof shows the correct Fogra 39 conversion and the printed sheet is still 15% darker and shifted toward magenta, the cause is almost always an uncalibrated laptop screen being used as a proofing device, not the conversion itself.