Bad Color Contrast Examples in Logos and How to Spot Them

Bad color contrast in a logo usually comes from one of two mistakes. Either two colors are too close in lightness, or the design relies on hue alone to separate shapes. For people with color vision differences, colors that look clearly distinct to most viewers, such as red and green, can collapse into nearly the same tone. This leaves the mark or wordmark hard to read. This article covers the most common problem pairings, explains why they fail, and shows how to check and correct them in vector logo artwork.

The short answer: lightness matters more than hue

A logo stays legible when its foreground and background differ clearly in lightness, also called value or luminance. Hue is the quality that makes something red, green or blue. It is the least reliable separator, because the most common forms of color vision deficiency reduce the ability to tell certain hues apart. If two colors have similar lightness, a person who cannot tell those hues apart may see little or no edge between them. A logo whose layout depends on that edge loses its shape.

Common bad color contrast examples

Pairing | Why it fails | Who is most affected

Red on green or green on red | Similar lightness, and the two hues are hard to tell apart with red-green deficiencies | People with protan or deutan color vision

Mid-tone red on mid-tone brown or olive | Hue is the only real difference between the colors | People with red-green deficiencies

Blue on purple | Purple's red component may not register, so it reads as another blue | People with red-green deficiencies

Yellow on white or light gray | Very little lightness difference, even for typical color vision | Most viewers, worse in bright light or on low-quality screens

Light gray on white | Low lightness difference and no hue to help | Most viewers, especially people with low vision

Blue on green or yellow on pink | Blue-yellow confusion can merge these pairs | People with tritan color vision

Saturated red on saturated blue | Similar lightness creates a vibrating edge with no clear boundary | Most viewers, and worse in grayscale reproduction

Pastel on pastel | Both colors sit near the same high lightness | Most viewers

Dark navy on black | Both colors are very dark, so the edge disappears in print and on dim screens | Most viewers

The table lists pairings that are commonly cited as risky. It does not report measurements. Whether a specific pair fails depends on the exact color values, so a navy and a black that look similar on one screen can still be measured and compared. Treat these categories as warning signs that call for testing.

Structural problems that make contrast worse

• Hue-only coding: separating a symbol's parts, or a symbol from its wordmark, by color with no change in lightness, shape or spacing.
• Gradients that cross the background value: a fill that starts dark and ends light will blend into a mid-tone background somewhere along its length.
• Thin strokes and small counters: fine lines and tight letter openings need more contrast than large solid shapes, because there is less area to perceive.
• Low-contrast details carrying meaning: a tagline, registration mark or small icon set in a pale tint often disappears first.
• Transparency effects: semi-transparent overlaps can produce in-between colors that sit too close to the background.

What accessibility guidelines say about logos

The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios for text. The minimum is 4.5:1 for normal text and 3:1 for large text. A separate 3:1 minimum applies to graphical objects that are needed to understand content. However, WCAG exempts text that is part of a logo or brand name from the text contrast requirement. In practice, this means a low-contrast logo is not automatically a WCAG failure. It is still a legibility problem. Many designers use these ratios as a practical benchmark for logo colors, and that is an editorial choice rather than a compliance requirement.

How to check a logo for contrast problems

• Convert the artwork to grayscale. If shapes merge or the wordmark fades, the colors are too close in lightness.
• Run the colors through a color vision deficiency simulator. Many design applications and browser developer tools include one, covering protan, deutan and tritan views.
• Measure foreground and background pairs with a contrast ratio checker, using the exact color values from the source file.
• Test the logo on every background it will actually appear on, including photos, dark mode interfaces and colored packaging.
• View the logo at its smallest intended size, such as a favicon, app icon or social avatar, where weak contrast fails first.

Fixing contrast in vector logo artwork

In a true vector file, each shape is a path with its own fill and stroke. That makes contrast fixes straightforward. You can darken or lighten one color, add a keyline around the mark, or swap a gradient for a solid fill without redrawing anything. A file's extension alone does not prove it contains editable paths, though. An SVG, EPS, AI or PDF file can simply wrap an embedded raster image, and some downloads are raster previews saved under a vector format. Open the file and inspect it before planning edits. If the logo is an embedded bitmap, recoloring it means tracing or rebuilding the artwork, not just changing a swatch.

• Increase the lightness gap first, then adjust hue for brand character.
• Add a non-color cue, such as an outline, spacing or a shape difference, wherever color currently does the separating.
• Provide a one-color black version and a one-color white or reversed version, so the logo works on any background.
• Define approved background colors in the brand guidelines, and list pairings to avoid.
• Deliver each color variant as a separate, clearly named file, with color values documented for both print and screen use.

A note on modifying other people's logos

Being able to download a logo file does not give you permission to change it. Recoloring a third-party logo to improve contrast can still conflict with the owner's brand guidelines or trademark rights. The fonts used in the wordmark may also have their own license terms. For logos you do not own, use the owner's approved high-contrast or one-color versions. If those versions do not exist, ask the owner for them.

Limits of this overview

No specific logos, measured color values or test results were available for this article. The examples above describe general pairing patterns and well-established principles, not audited cases. To judge a particular logo, measure its actual colors and test them on the backgrounds where it will appear.