skip to content

Why does a logo system ship full-color, monochrome and single-color versions, and how do you choose one for light, dark and photographic backgrounds?

level: middleimportance: should knowfreq 25%

answer

  1. one mark, several color renderings
  2. reversed version for dark surfaces
  3. one-ink printing and limited color
  4. calm area or scrim on photos
  5. logotypes and WCAG contrast exemption

basics

~20 s

Versions keep the logo recognisable on every surface and reproduction method: full color on light, calm backgrounds, reversed white on dark ones, monochrome or single-color where only one ink exists or the background fights the brand colors.

solid answer

~40 s

The **full-color** logo is the primary version, used on light, calm backgrounds where its colors hold. A **monochrome** version renders the whole mark in black or in white - the white, reversed version is what goes on dark surfaces such as a kitchen display - and a **single-color** version uses one brand ink for limited-color reproduction. In a restaurant point-of-sale app, the thermal receipt printer prints only black, so the receipt uses the black version, while the idle screen over a food photograph needs a calm area or a scrim and whichever version separates most clearly. Under WCAG 2.2, logotypes are exempt from the 1.4.3 and 1.4.11 contrast requirements, but when the logo acts as a control the Understanding notes advise, as a best practice, choosing a variant with sufficient contrast.

go deeper

for a junior

Recall the version set - full-color, monochrome black and white, single-color - and which one goes on light, dark and photographic backgrounds. Never recolor the artwork yourself.

for a middle

Explain the separation logic behind the choice, why one-ink reproduction such as a thermal receipt needs its own version, and what the WCAG logotype exemption does and does not cover.

for a senior

Handle the edge cases: a logo acting as a control, an author-chosen low-contrast treatment, a missing reversed version. Push for approved artwork rather than local fixes.

for a principal

Weigh brand fidelity against legibility in operational products, and decide which versions a design system must require from the brand team before product surfaces multiply.

## Why one logo has several color versions A logo has to survive every surface and every reproduction method a product uses. The full-color artwork cannot do that alone: on a dark surface its dark parts disappear, on a busy photograph its colors compete, and on a one-ink printer the colors cannot be reproduced at all. Brand guidelines therefore define a small, fixed set of **color versions** of the same mark. Names vary between brands, but the common set is: | Version | What it is | Typical use | |---|---|---| | **Full-color** (primary) | The logo in its complete brand colors | Light, calm backgrounds where every color holds | | **Monochrome black** | Entire mark in black | One-ink printing, light backgrounds where color is not available | | **Monochrome white** (reversed, knockout) | Entire mark in white | Dark backgrounds and dark photographs | | **Single-color** | Entire mark in one brand color | Limited-color reproduction such as merchandise or one-color print | Each version is **separate approved artwork**. Nobody recolors the full-color logo by hand; the versions are drawn once, checked by the brand owner, and shipped as a set. ## Choosing a version by background The selection rule is about separation: the mark must stand clearly apart from what sits behind it. - **Light, calm background** - full-color, or monochrome black when color is not available. - **Dark background** - the reversed white version, or a full-color variant the brand has approved for dark surfaces. Placing the dark-on-light artwork on a dark surface makes parts of the mark vanish. - **Brand-colored background** - often monochrome white, because the brand colors in the logo would sink into a background of the same hue. - **Photograph or illustration** - place the logo on a calm, low-detail area of the image, add a **scrim** (a translucent overlay that evens out the area behind the mark), or put the logo in a solid container. Pick the version with the strongest separation from that area. ## A point-of-sale walk-through A restaurant point-of-sale app shows the logo in several places: 1. **Order screen header** on a light surface: full-color. 2. **Kitchen display** running on a dark surface: the reversed white version. 3. **Idle screen** over a photograph of dishes: the reversed version on the dark lower third of the photo, with a scrim if the plating is busy there. 4. **Printed receipt** from a thermal printer that renders only black: the monochrome black version. Letting the printer convert the full-color logo produces a dithered gray blur, because thin brand colors turn into scattered dots. How a theme swaps these assets when the whole interface changes mode is a theming concern; the logo rule is only which version belongs on which kind of surface. ## Where accessibility standards stand WCAG 2.2 treats logos as **essential** presentation: - **SC 1.4.3 Contrast (Minimum)** (Level AA) states that text that is part of a logo or brand name has no contrast requirement. - **SC 1.4.11 Non-text Contrast** (Level AA) exempts graphics that are part of a logo or brand name. - **SC 1.4.5 Images of Text** (Level AA) considers logotypes essential, so a logo may be an image of text. Two caveats in the Understanding documents matter in product work. First, when a logo **acts as a control** - the home link in a header - authors should, as a best practice, choose a variant of the logo with sufficient contrast if the brand guidelines allow it, or provide an equivalent control that meets the requirement. Second, if a low-contrast presentation is an **author's styling choice** rather than a brand mandate - for example, partner logos grayed out until hovered - that presentation is not essential and is not exempt. So the exemption protects the brand's own colors; it is not permission to put the logo where it cannot be seen. ## Common mistakes - Recoloring the full-color logo to match a product accent color. - Applying a drop shadow or outline to rescue a logo placed on the wrong background, instead of choosing the right version. - Using the reversed version on a light surface, where it disappears entirely. - Placing the logo over the busiest part of a photograph and hoping its colors hold.

  • The brand has no approved reversed version, and the kitchen display is dark; what do you do?
    Do not invent one by recoloring the artwork. Either request a reversed version from the brand owner, which is the lasting fix, or in the meantime place the full-color logo inside a light container with its clear space, so the approved artwork sits on a surface it was designed for.
  • Does the WCAG logo exemption mean a header logo that doubles as the home link can have any contrast?
    Its brand colors are exempt, but the Understanding notes for 1.4.3 and 1.4.11 flag the control case: as a best practice, choose a logo variant with sufficient contrast if the brand allows it, or offer an equivalent control that meets the requirement. The exemption also does not cover a low contrast the author chose for styling.

saying these in an interview costs you the question

  • Logos must meet the same 4.5:1 contrast as body text
  • A drop shadow fixes a logo placed on the wrong background
  • Any team may recolor the logo to match the product accent
  • The full-color logo works on every surface if it is big enough
  • A grayed-out partner logo is exempt because it is a logo