Why Do We Design in Grayscale First?

Why Do We Design in Grayscale First?

Because colour hides weak hierarchy. When everything is grey, the only tools left are size, weight, spacing and position, and a layout that works with those alone will work with anything. Colour added afterwards makes a strong page better. Colour added first makes a weak page look finished.

This is a working habit rather than a rule we impose on clients, and it is not universal in our team. But it has caught more structural problems early than any review process we have tried, so it is worth explaining what it actually does.

Here is how we use it, where it fails, and the accessibility reasons it happens to double as a useful check.

What Problem Does This Actually Solve?

Colour doing structural work it should not be doing. A primary button that only reads as primary because it is orange has no hierarchy underneath it. Put that page in grayscale and the button vanishes into the row of secondary actions, which tells you the shape was never right.

The same thing happens with sections. Teams separate content with alternating background colours, and it looks organised, right up until you remove the colour and discover that every section has identical spacing, identical type sizes and no visual rhythm at all.

Grayscale does not fix those problems. It makes them impossible to ignore at the point where fixing them is cheap.

Does This Mean Colour Is Decorative?

No, and that is a misreading worth heading off. Colour carries brand, mood and meaning, and on a marketing site it does an enormous amount of work that grey cannot.

The claim is narrower: colour should reinforce a hierarchy that already exists, not create one. A primary button should be the most prominent thing in its group because of its size, weight, position and surrounding space. Making it your brand colour then confirms what the layout already said.

When both are true, the design survives conditions you did not plan for: a screenshot in a black and white deck, a user with a colour vision deficiency, a monitor with terrible colour calibration, a dark mode variant nobody budgeted for.

How Common Are Colour Vision Differences?

Common enough that a B2B site sees them daily. The National Eye Institute states that about 1 in 12 men have colour vision deficiency, and that men have a much higher risk than women.

It also notes that the most common type makes it hard to tell the difference between red and green, another type makes blue and yellow look the same, and in rare cases people have complete colour vision deficiency and do not see colour at all.

The practical consequence is that a red and green status system is unreadable for a meaningful share of your audience. If red and green are the only difference between "failed" and "passed", the interface is broken for them, and grayscale mockups surface that instantly.

Is This the Same as Checking Contrast?

Related but not the same. Contrast is a measurable requirement; grayscale is a design method. They overlap because both ask what survives when colour information is reduced.

The W3C's Success Criterion 1.4.3 Contrast (Minimum), at Level AA, requires text and images of text to have a contrast ratio of at least 4.5:1, with 3:1 allowed for large-scale text, defined as at least 18 point or 14 point bold. Logos, brand names, inactive components and purely decorative text are exempt.

The W3C's rationale is specific: the 4.5:1 ratio accounts for the loss in contrast that comes from moderately low visual acuity, congenital or acquired colour deficiencies, and the loss of contrast sensitivity that typically accompanies ageing. Our wider guide to WCAG accessibility covers where the rest of those criteria sit.

Where in the Process Does This Fit?

Early, and briefly. We work in grey through wireframes and the first layout pass, which is usually the point where the page structure and the content hierarchy are being decided together. Once those are settled, colour goes in.

It is not a long phase. On a typical marketing page it lasts a day or two, and the point is not purity. The point is that nobody gets to resolve a hierarchy argument by reaching for a brighter colour during the window when the structure is still moveable.

After that we work in full colour like everyone else, and we go back to grayscale only when something feels off and nobody can articulate why. It is a diagnostic as much as a stage.

What Does Grayscale Miss?

Plenty, and we should be honest about it. It tells you nothing about whether a palette feels premium, whether two brand colours fight, or whether the page has the emotional register the client wants. Those are real questions and grey cannot answer any of them.

It can also mislead on imagery. A photograph that carries a section in colour can look flat and forgettable in grey, and teams sometimes over-correct by redesigning around a problem that does not exist in the shipped version.

And it is not an accessibility test. Converting to grayscale approximates a loss of colour information, but it does not simulate any specific colour vision deficiency accurately. Use a real simulator and a real contrast checker for that.

Does This Work for Product Interfaces Too?

Even better, in our experience, because product UI leans on colour for state far more than marketing pages do. Statuses, badges, charts, validation and alerts all tend to encode meaning in hue alone, which is exactly the failure mode grayscale exposes.

The fix is almost always to add a second channel: an icon, a label, a shape, a pattern in the chart series. None of those cost much, and they make the interface legible in a screenshot, in a printout and to a person who cannot distinguish the two colours you chose.

It is the same reasoning behind not using colour alone to indicate a required field or an error, which is a rule teams know and break constantly.

How Do You Introduce Colour Without Undoing the Work?

Deliberately and sparingly at first. We add the brand colour to exactly one thing per view, usually the primary action, and then look again. If the page suddenly feels much clearer, that is a warning sign rather than a success, because it means the colour is carrying the hierarchy.

From there, colour gets assigned jobs rather than sprinkled: one for primary actions, one for emphasis, a small set for state, and neutrals for everything else. A palette with defined roles is much easier to extend later than a palette that is just a list of nice colours.

Our piece on building a website colour palette covers how we structure those roles so a design system can grow without accumulating exceptions.

Is This Worth Adopting on Your Team?

Try it on one page before adopting it as a policy. Take a page you already shipped, remove the colour, and look at whether the structure still tells you what is important. If it does, your process is fine and you do not need this. If it does not, you have found something worth fixing.

That is really the whole argument. Grayscale is not a philosophy, it is a cheap test that happens to be most useful at the moment when changes are cheapest, and it tends to make the resulting design work in more conditions than the one it was drawn for.

If you want us to run that test on a design you are unsure about, we are happy to take a look. You can reach our team at phoenix.studio.