How to Evaluate Logo Contrast Before and After a Redesign
Practical steps to check logo contrast before and after a redesign, measure WCAG ratios, and verify the result on light and dark backgrounds.
Before you start
You need two versions of the logo: the current file and the redesigned file. Use PNG or SVG at the largest available width. You also need the exact background colors the logo will sit on, because contrast is always measured between two colors, not on a logo by itself. All contrast checks can run locally in the browser with a color picker or a contrast checker; uploads do not need to be sent to a server.
Step-by-step instructions
Open both logo files side by side and identify the smallest foreground elements that still matter, such as a wordmark, a thin outline, or a small symbol. Large decorative shapes matter less than the smallest text or detail.
Sample the color of the foreground element and the color directly behind it. For a symbol, choose the dominant shape color and the surrounding background. For a wordmark, choose the text color and the background color.
Enter the two colors into a contrast checker and read the ratio. A ratio of 4.5:1 or higher is a common target for normal text, while 3:1 is often used for large text or simple graphic shapes. If your tool shows WCAG labels, note whether the pair passes AA or AAA.
Repeat the measurement against every intended background: white, black, a brand color, and a photographic or textured area. A logo rarely sits on a single flat color, so a pair may pass on white but fail on a mid-tone brand color.
Check the redesigned version with the same sample points and backgrounds. Then compare the lowest ratio from each version. The redesign should not simply look stronger; it should keep or improve the minimum contrast in the actual use cases.
Check the output
A useful result is a recorded set of color pairs and ratios for the current and redesigned logos on the same backgrounds. If a ratio is below your target, the check has found a real limitation. For raster logos, remember that anti-aliasing can soften edges; sample the solid middle of a stroke rather than a blurred boundary. For SVG logos, flat fills are the most reliable colors to measure, while gradients require checking both the lightest and darkest visible sections.
Common problems and next steps
If the redesigned logo fails on only one background, do not reject the whole concept immediately. Try a slightly darker or lighter variant of the foreground color while keeping the shape of the mark. When the logo uses a gradient, test the section that gives the lowest contrast.
When a thin outline disappears on a dark background, increase the stroke width or move the outline to a higher-contrast color. In responsive use, also check the logo at a small width; details can remain visible at full size but disappear when scaled down.