Why Your Logo Disappears on a Dark Background, and the Right Way to Fix It
Most logos are drawn for a white page: dark lettering with a coloured mark. Place one on a navy banner and the lettering disappears, leaving a lone symbol floating in the dark. The tempting fix is to retype the name in a similar font in white. Do not. A logo is a drawing, not a font setting, and a retyped version is a different logo whose letterforms, spacing and line weights are all slightly wrong. The right fix is to derive a reversed version from the real artwork, changing only the colour of its pixels or shapes. We learned this from a consultancy client who spotted our retyped version within moments, and this post is what we do instead.
Key takeaways
- Most logos are designed for white; on a dark background the lettering disappears, so you need a reversed version.
- Make it from the real artwork by recolouring pixels or fills, never by retyping or redrawing, and prove it by matching opaque-pixel counts.
- Check whether your SVG contains paths; many are a picture inside a vector wrapper and must be recoloured as pixels.
- Keep brand colours that fail contrast for marks and rules, and use a light palette colour for text on dark.
- A social cover is a fixed budget: respect the overlay corner, and when content cannot fit, drop what the platform already shows.
What happened, and why the client noticed at once
The client's logo was a light-background design: ink-coloured lettering with a maroon symbol. Their banner was deep navy, and on navy the ink lettering simply vanished. Instead of deriving a reversed version of their file, we typeset the name in a lookalike font, in white, with the symbol beside it.
The client caught it immediately. At a glance it looked close. But every letter was a little off, the spacing between them was different, and the thin rule beneath the name had lost its weight. People who have looked at their own logo for years see those differences in a second. A client's logo is the one piece of artwork they know better than any designer, so it is the worst place to improvise.
The right fix: change the colour, never the shape
A reversed logo is made from the original file. If the artwork is made of pixels, you recolour the pixels. If it is made of vector shapes, you recolour the fills. Either way, every letter, curve and gap stays exactly as the designer drew it, and only the colour changes.
In practice we sort the pixels by hue. In this client's file the symbol was the red-dominant part and everything else was the ink. We mapped the ink to a light stone colour for the navy background and kept the symbol in a red bright enough to read on navy, preserving the transparency of the original at every edge. Then we proved the shapes were untouched: the number of opaque pixels in the new file had to equal the number in the source. If the counts match, only colour changed. We kept the script that does this, so the reversed, mono and knock-out versions can be rebuilt at any time and are plainly derived rather than invented.
A check that proves nothing was redrawn
Count the opaque pixels in the original and in the reversed file. Equal counts mean the shapes are identical and only colour changed. Different counts mean something moved.
Your vector logo may not be a vector
Logo files named with the SVG extension are often a photograph of the logo wrapped in a vector container. Open the file in a plain text editor. A real vector contains path elements that describe the shapes. A wrapped picture contains a single image element with a long block of encoded data and no paths at all. The client's files were the second kind, so recolouring fills would have done nothing; the real artwork was the transparent PNG, and the work had to be done on its pixels.
That is why it is worth asking early for the largest original there is. A slide deck from the designer usually embeds the artwork far larger than the small PNG in a website header. Starting from the biggest source and shrinking in steps of no more than half at a time keeps the edges clean.
Contrast: where the brand colour can and cannot go
Reversing a logo is also a colour decision. A dark red that reads well on white can fail contrast on navy. In this brand the maroon was fine as a thin rule or the symbol, which are shapes, but not as text on the navy, where it failed the contrast test. The rule we follow: a brand colour that fails on a background is kept for marks and rules, and the text on that background uses the light colour from the palette.
A cover is a budget, not a canvas
The same client needed LinkedIn covers. The personal cover is 1584 by 396 pixels and the company page cover is 1128 by 191. LinkedIn paints its own profile photo or page logo over the bottom-left corner, so anything of yours in that corner is hidden. We treat that as a no-go zone and measure against it: for the personal cover roughly the box from 0, 244 to 376, 396, and for the company cover from 0, 111 to 208, 191. These are our own conservative estimates, not LinkedIn's published numbers, and we check every logo and line of text against them.
The height is the other limit. The company cover is only 191 pixels tall. Our six blocks of content measured about 120 pixels, the minimum comfortable gaps between them about 72, and the margins about 48, a total near 240 pixels in a space of 191. It cannot fit. Shrinking the type or squeezing the gaps would have made a cramped banner, so we changed the design instead: we dropped what LinkedIn already prints beneath the cover, the company name, location and website, and kept the logo and the one line that matters. When a layout cannot fit, the answer is less content, not smaller content.
What to ask your designer for
A complete logo kit is more than one file. Ask for each of these and check that they open.
| File | What it is for |
|---|---|
| Primary logo, true vector (SVG or PDF with paths) | Print, signage, anything that must scale without blur |
| Primary logo, transparent PNG at large size | Websites, documents, slides |
| Reversed logo for dark backgrounds | Dark banners, video, dark mode |
| Single-colour logo, black and white | Stamps, embossing, faxes, one-colour print |
| Symbol only | App icons, social profile pictures, favicons |
| The script or note that derived the variants | So anyone can rebuild them from the original |
The logo files a business should hold
Work with us on your brand
If your logo is missing a reversed or single-colour version, or the files you hold are the wrong kind, our brand and logo design service starts with an audit of what you have, and we derive what is missing from your real artwork. To start, send us your current files. For the design thinking around a brand, what UI and UX design includes is a good companion.
A logo is a drawing, not a font setting. Change its colour; never redraw its shape.
Frequently asked questions
How do I put my logo on a dark background?
Use a reversed version made from the original artwork by changing only its colours, so the lettering becomes light and the mark stays readable. Do not retype the name in a similar font, because the letterforms and spacing will differ from the real logo.
What is a reversed logo?
A version of your logo recoloured for dark backgrounds, typically with the dark lettering changed to white or a light colour. A true reversed logo is derived from the original, with every shape unchanged.
How can I tell whether my SVG logo is real vector?
Open it in a plain text editor. A real vector contains path elements describing the shapes. A picture wrapped in an SVG contains an image element holding encoded picture data and no paths.
What logo files should a business have?
A true vector primary logo, a large transparent PNG, a reversed version for dark backgrounds, a single-colour version, and a symbol-only version, plus a note on how the variants were made.
What size is a LinkedIn cover image?
The personal profile cover is 1584 by 396 pixels and the company page cover is 1128 by 191. LinkedIn places the profile photo or page logo over the bottom-left corner, so keep text and logos away from it.
Why does a brand colour look wrong as text on a dark background?
A dark colour that contrasts well with white can have too little contrast against navy. Use it for shapes such as rules and symbols, and set the text in a light colour from the palette.
Have a project in mind?
We design, build, and ship software end-to-end — with a fixed, written quote after a free scoping call.