Your Colours on Somebody Else's Screen

Why no two screens agree

A colour code specifies an instruction rather than an appearance, and every screen interprets it slightly differently.

Panels differ by manufacturer and technology. Brightness settings vary. Screens age and shift. Ambient light changes perception. Night modes alter the temperature of everything.

And phones increasingly adjust their display automatically according to the surrounding light, which means the same screen shows the same colour differently at different times of day.

Which means there is no version of this where everybody sees what you approved on your own monitor, and designing as though there were is the actual mistake.

What varies most

• Saturated colours, which shift most between panels.
• Near-blacks and near-whites, which can collapse.
• Subtle differences between similar shades.
• Anything relying on low contrast.
• Colours that carry meaning on their own.

The second is the practical trap: a very dark grey and black look identical on some screens and clearly different on others, so a design built on that distinction works for some people and not others.

Dark mode changes things you did not choose

The newer complication, and it is applied without asking you.

Mail clients and browsers increasingly invert or adjust colours for readers using dark mode, and they do it inconsistently.

Some invert everything, some adjust backgrounds and leave text, and some leave images alone while changing what surrounds them.

Which produces a logo with a white box around it, dark text on a dark background, or a colour pairing you never specified.

You cannot fully control it, and you can design so that the failure is mild: avoid relying on a specific background colour, provide a logo version that works on dark, and keep contrast generous.

Design for tolerance

The conclusion that follows, and it is a design decision rather than a technical one.

Choose colours that remain themselves across a range: a blue that is clearly blue whether it renders slightly greener or slightly purpler.

Avoid pairings that depend on a small difference, since that difference will disappear somewhere.

Keep contrast well above the minimum, so a screen rendering things flatter than yours still produces readable text.

And never let colour be the only thing carrying a meaning, since somebody's screen, settings, or vision may remove the distinction entirely.

A palette that tolerates variation looks the same everywhere in the only sense that matters, which is that it looks deliberate.

A worked example

A business chose two greens for their identity, close enough that one was a highlight of the other.

On the designer's monitor the difference was clear and the effect was subtle and good.

On a customer's older laptop the two were indistinguishable, so the highlighted elements simply disappeared into the background.

On a phone in bright sunlight the whole palette flattened and the site looked washed out.

They replaced the second green with a considerably darker shade, keeping the first, which lost some subtlety and worked everywhere.

Their designer's remark afterwards was that the original had been designed on one screen for one screen, which is the ordinary way this happens.

Check on other devices

The practical step, and it needs no equipment.

Look at your site and your material on an old phone, a cheap monitor, and somebody else's laptop.

Look outdoors in daylight, which is where a phone screen behaves least like your desk.

Turn dark mode on and look again, since a growing share of people never turn it off.

Ask two people to look and tell you whether anything is hard to read, since you know what it is supposed to say and they do not.

Twenty minutes of that finds more than any amount of calibration.

Record the specification anyway

Because tolerance is not the same as vagueness.

Write down the exact codes for screen use, and the print and vinyl references separately, since those are different systems and cannot be derived from each other reliably.

Give the file to anybody producing anything: a printer, a signwriter, a supplier producing branded material.

That is what makes your material consistent within its own medium, which is achievable, as opposed to identical across all media, which is not.

The goal is that everything you produce is recognisably the same, not that a van matches a screen exactly.

Calibration is not the answer

Worth addressing, since it is the technical response people reach for.

Calibrating your own monitor makes your screen accurate, which is useful for anybody producing work for print.

It does nothing about your customers' screens, which are the ones that matter and which are not calibrated and never will be.

So calibration solves a production problem rather than a communication one.

Where you are producing print work, calibrate and get a physical proof. Where you are choosing brand colours for general use, design for the uncalibrated majority instead.

Photographs shift too

An extension worth knowing, since it affects the material a small business actually publishes.

A photograph of your work taken on one phone and viewed on another goes through two separate interpretations, and phone cameras process colour heavily before you ever see the image.

Which means a photograph of a colour, such as a paint finish or a tile, is a rough indication rather than a reference.

Say so where the colour matters commercially, since a customer choosing from a photograph and receiving something different will reasonably complain.

For anything where the exact shade is part of what is being bought, a physical sample is the only honest answer and a photograph is a starting point.

The counter-case

This can be taken as licence for a dull palette.

Designing entirely for the worst screen produces safe, high-contrast, unmemorable colours, and distinctiveness has value too.

Some businesses also genuinely need colour accuracy, particularly anybody selling something where the colour is the product, and for those a photograph and a stated caveat matter more than the brand palette.

And a certain amount of variation is simply invisible to customers, who are not comparing your blue against a reference.

Choose colours you like, avoid pairings that depend on small differences, keep contrast generous, and check on a cheap phone before committing.

What to do

1. Assume nobody sees what your monitor shows.
2. Avoid pairs that depend on a small difference.
3. Keep contrast well above the minimum.
4. Never let colour alone carry meaning.
5. Provide a dark-background version of the logo.
6. Check on an old phone, outdoors, in dark mode.
7. Record codes separately for screen and print.

Step six finds nearly everything worth finding, and it costs twenty minutes with devices you already have access to.

The print and physical version is covered in the colour that looks wrong on a van.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.