Logo Contrast: How to Evaluate Readability Before and After a Redesign

The short answer

Evaluate logo contrast by testing the old and new artwork under identical conditions. List every pair of colors that must stay distinguishable, calculate a contrast ratio for each pair, and then check the artwork in grayscale, at its smallest intended sizes, and on every background it will appear on. A redesign improves readability only if the new version holds up in those same tests at least as well as the original. Any pair that fails should be fixed in the artwork or covered by an alternate version, such as a one-color or reversed logo, instead of being left to chance.

In this context, contrast means the difference in lightness, measured as relative luminance, between adjacent parts of the logo, and between the logo and its background. Hue alone does not provide readable contrast. A red and a green of similar lightness can look distinct in color and still merge in grayscale, at small sizes, or for viewers with color vision deficiencies.

A few vector terms are needed for the checks below. A path is a vector outline built from anchor points and curve segments. A fill is the color inside a closed path, and a stroke is the line drawn along a path at a set weight. A compound path combines several paths so that overlapping areas become holes, for example the counters inside letters such as o or e. A reversed or knockout version is a logo in which the mark is shown as the background color, or as an empty space, on a solid field.

The Web Content Accessibility Guidelines (WCAG) define contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker one. The result runs from 1:1 (no contrast) to 21:1 (black on white). The minimum text-contrast criterion sets 4.5:1 for normal text and 3:1 for large text. However, that criterion explicitly exempts text that is part of a logo or brand name.

Because of that exemption, a logo is not out of compliance under that criterion just because its colors fall below these ratios. Using 4.5:1 for small wordmarks and 3:1 for large or bold elements is a design recommendation, not a documented requirement for logos. The thresholds are still useful because they give the before-and-after comparison a consistent, measurable reference point. Text near the logo, such as a tagline set as live text on a web page, may not fall under the exemption. That case should be checked against the accessibility requirements that apply to the specific project.

Starting conditions

Vector master files for both the original and the redesigned logo, opened and inspected, not just identified by file name.
Confirmation that each file contains vector paths rather than embedded raster images. A file extension such as SVG, EPS, PDF or AI does not prove vector-only content, does not prove the artwork is editable, and does not grant permission to modify or reuse a logo.
Typography either converted to outlines or with the original fonts available, so letter shapes render as designed.
The documented color values for each version, in the color spaces used for delivery: RGB or hex for screen, CMYK or named spot colors for print.
A list of the real backgrounds the logo must sit on, including light, dark, brand-colored and photographic backgrounds.
The smallest sizes at which each version will be used, on screen and in print, taken from the actual placements rather than guessed.

Step-by-step evaluation

1. Inventory color pairs. For each version, list every pair of adjacent colors that carries meaning: letterforms against background, symbol against background, and any internal parts of the mark that must stay separate.
2. Get comparable values. Contrast ratio is calculated from sRGB values. For print-only colors, use the on-screen equivalent as an approximation and confirm with a physical proof, because screen values do not predict printed results.
3. Calculate ratios. Run each pair through a contrast calculator that uses the WCAG formula, and record the result for both the original and the redesign.
4. Find the worst point in gradients and transparency. If a fill is a gradient, or an element uses reduced opacity or a blending mode, its effective color changes across its area or with the background. Measure the lowest-contrast point, not the average.
5. Grayscale check. Preview both versions in grayscale. Desaturation methods differ between applications, so treat this as a visual check that confirms or questions the measured ratios, not as a measurement in its own right.
6. Size reduction check. Export or preview both versions at the smallest intended sizes. Look for counters that fill in, thin strokes that disappear, and gaps between shapes that close up.
7. Background check. Place both versions on every listed background. For photographic backgrounds, test the busiest and the most mid-toned areas.
8. Alternate-version check. Where a pair fails on a given background, test whether a one-color, black, white or reversed version solves the problem. Do not adjust the main colors for that single case.
9. Side-by-side comparison. Review the original and the redesign together at identical sizes, on identical backgrounds and in identical viewing conditions, and record which one performs better on each check.

Path and typography details that change perceived contrast

Two color pairs with the same measured ratio can read very differently depending on geometry. Thin strokes, hairline serifs, small counters and tight letterspacing all reduce the area where contrast is visible. Once the logo is scaled down or anti-aliased, edges blend into the background. If the redesign uses lighter weights, narrower letters or tighter spacing than the original, it can read worse even with identical colors.

Convert structural strokes to filled outlines in the final artwork. Depending on application settings, a stroke may keep its weight when the logo is scaled, which changes its proportion to the rest of the mark and its visibility at small sizes.
Check that counters and cutouts are true holes in compound paths, not white shapes placed on top. A white shape stays white on a dark or colored background and breaks the reversed version.
Examine the thinnest part of every letter and symbol at the smallest intended size. If it disappears, consider a separate small-size version with heavier strokes and more open spacing.
Replace reduced opacity and blending modes with solid, specified colors wherever possible, so the measured contrast stays the same on every background.
For print artwork, check overprint settings. An element set to overprint mixes with the ink beneath it and can lose the contrast measured on screen.

Export settings that preserve the tested contrast

Contrast verified in the master file can still be lost at export. For screen delivery, export in RGB with explicit color values and an embedded or documented sRGB profile, so the colors are not reinterpreted. In SVG files, confirm that fills are written as explicit solid colors and that no leftover opacity or effects remain. For print delivery, keep the specified CMYK or spot values and confirm the result on a proof. For raster exports at small sizes, review the actual output files, because anti-aliasing can soften thin details more than the vector preview suggests. Exact menu names and export options differ between applications and versions. This guide does not list them, so check the documentation for the version in use.

Before-and-after comparison template

Check | Original logo | Redesigned logo | Notes

Lowest contrast ratio among meaningful color pairs | | |

Lowest ratio inside gradients or transparent areas | | |

Grayscale legibility | | |

Legibility at smallest screen size | | |

Legibility at smallest print size (proof) | | |

Light background | | |

Dark background | | |

Brand-color background | | |

Photographic background | | |

One-color and reversed versions available and tested | | |

How to confirm the evaluation is complete

Every meaningful color pair in both versions has a recorded contrast ratio, and gradients and transparent areas are measured at their weakest point.
Both versions have been reviewed in grayscale, at their smallest intended sizes, and on every listed background under identical conditions.
Each failing case has an assigned fix: changed artwork, a heavier small-size version, or a specified alternate version.
The delivered files contain vector paths with outlined or available type, solid specified colors, and holes built as compound paths.
Exported files have been opened and checked directly, and print colors have been confirmed on a proof.
The comparison table shows where the redesign improves, matches or falls short of the original, so the decision is based on recorded results.

Gaps to fill for a specific project

This guide does not provide brand-specific color values, measured ratios or minimum-size figures. Those depend on the actual artwork and placements and must be measured, not assumed. It also does not cite a documented contrast requirement for printed logos, and it does not cover application-specific commands. Check those against the applicable standards, print provider guidance and software documentation for the project.