Tools for Testing Logos: Contrast, Favicon Previews and Colour-Blindness Simulators

Client approval is the most dangerous moment in the design process. It measures taste, not legibility. A logo must pass four objective tests before delivery: contrast ratio, favicon scalability, colour-blindness simulation, and one-colour reversal. Each one catches a failure mode that a 27-inch display will hide completely. A logo tested only on a large screen looks fine because the monitor is large, bright, and viewed straight-on. The same mark at 16 pixels, on a phone in sunlight, or printed in a single colour on a packing slip, can collapse into an illegible smudge. The tools for testing these four properties are not optional extras. They are the difference between a brand asset and a liability.

WCAG 2.2 Contrast Ratio

The first test exists because the human eye cannot reliably judge luminance differences between adjacent colours. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the darker one, using the WCAG relative luminance formula derived from sRGB values. The passing threshold for normal text is 4.5:1. For large text at least 18pt, or 14pt bold, it is 3:1. For UI components and graphical objects it is 3:1. Here is a critical warning: the antialiased-edge pixel false pass. When a contrast checker samples a single rendered pixel, it often picks up a blended edge where the foreground and background mix, inflating the ratio by as much as 1.5:1. Always verify on a solid fill, not on a gradient or an edge.

The 16-Pixel Favicon Collapse

The second test is the 16-pixel favicon legibility test. At that size, detail collapses entirely. Strokes that are 2 pixels wide at 100% scale become 0.3 pixels. They vanish or merge. The favicon detail collapse is the reason a brand mark that looks elegant on a letterhead can look like a smudge on a browser tab. The test is brutal: render the logo at 16 × 16 pixels, then zoom back to 100% and ask if you can identify it. If you cannot, the logo needs a minimum-detail variant designed specifically for that size.

Colour Vision Deficiency Simulation

The third test is the colour blindness simulation. Roughly 8% of men and 0.5% of women have some form of colour vision deficiency, according to data cited by the W3C Web Accessibility Initiative. The most common types are deuteranopia (green-blind), protanopia (red-blind), and tritanopia (blue-yellow blindness). A logo that uses red and green to separate figure from ground will fail for a deuteranopic viewer. Those colours merge into a single muddy tone. The simulation tool applies a mathematical transformation to the RGB values, showing you exactly what the logo looks like through each condition. If the figure-ground separation disappears, the mark becomes unreadable.

One-Colour Reversal And The Silhouette Standard

The fourth test is the one-colour legibility check. A logo must work in positive (dark on light) and reversed (light on dark). It must also work as a single-ink print. This catches the reversed-out stroke closure problem, where thin white strokes on a dark ground fill in or break apart on press. The silhouette recognition test applies the same idea. If the logo is identifiable only when you can see the internal detail, it fails. A robust logo passes the silhouette test at 100% and at 16 pixels.

The WCAG 2.2 minimum contrast ratio for normal text is 4.5:1. For large text (at least 18pt, or 14pt bold) it is 3:1. For UI components and graphical objects it is 3:1. The standard is published by the W3C; the current version is 2.2, published 5 October 2023. To run the test correctly, you need a tool that samples the actual surface colour, not a blended edge. Many free contrast checkers exist. The reliable ones let you input the hex values of the foreground and background and display the relative luminance calculation. The antialiased-edge pixel false pass is real. If your tool samples a screenshot, it will pick up the anti-aliased pixels that blend the two colours, producing a ratio that looks passing but is not. The test requires a solid fill sample. No gradients, no shadowed areas.

Use the actual brand colours. Do not substitute a lighter or darker variant you think might pass. Then test the logo on the two most common surfaces: white and black. If the logo is ever placed on a photograph, test the worst-case area, the patch with the least contrast. The WCAG formula is a mathematical definition of legibility. Research has shown it predicts readability for people with normal vision and for those with low vision. If the ratio fails, do not rely on a slightly larger size to save it. The formula accounts for size, but the 3:1 threshold for large text is the minimum, not a comfort zone.

The 16-pixel favicon is the smallest size at which a logo will ever be displayed. It is where most logos die. At that size, a 2-pixel stroke becomes 0.3 pixels, below the resolution of most screens. Fine lines, small counters, and intricate serifs simply disappear. The test is simple: create a 16 × 16 pixel canvas, paste your logo as a vector, and rasterise it. Zoom to 400% and examine the pixels. If the logo is not clearly recognisable, it needs a minimum-detail variant. That variant must have bolder strokes, larger counters, and no fine detail.

The reason is straightforward. Most logos are designed at large sizes, where the human eye can resolve every detail. At 16 pixels, the eye can only resolve the overall shape. The silhouette must be distinctive. A logo that looks like a generic geometric shape at that size will be indistinguishable from its competitors. The silhouette recognition test is the same principle. If you cannot recognise the logo by its outline alone, it lacks the simplest form of identity. Run the test on a white surface and on a black one. A favicon often appears on both light and dark browser chrome. The test is unforgiving. That is the point.

A colour blindness simulation tool applies the mathematical transformation that mimics the three main types of colour vision deficiency: deuteranopia (green-blind, affecting about 5% of men), protanopia (red-blind, about 1% of men), and tritanopia (blue-yellow blindness, much rarer). The simulation shows you exactly what the logo looks like through each condition. The result is often surprising. A logo that uses red and green to separate figure from ground will merge into a single brownish tone for a deuteranopic viewer. A logo that uses blue and yellow will lose its distinction for a tritanopic viewer. The tool does not guess. It applies a precise matrix multiplication to the RGB values, so the output is reliable.

The test is not about making the logo pretty for colour-blind people. It is about ensuring the logo is legible when colour information is removed. If the logo fails, the eye cannot tell where the background ends and the foreground begins. The fix is to ensure that the logo's shape, not its colour, carries the identity. A logo that passes this test will be recognisable in greyscale, in a silhouette, and in a single-ink print. Run the simulation on the primary colour version and on the reversed version. The contrast between the logo and its backdrop changes, and the colour relationship inverts.

The one-colour legibility test is the final gate before delivery. The logo must work in three states: positive (dark on light), reversed (light on dark), and single-ink (one colour on any surface). The positive version is the most common. The reversed version catches a specific flaw: the reversed-out stroke closure problem. When a logo has thin white strokes on a dark ground, those strokes can break apart or fill in at small sizes. On press, the ink spreads slightly. A 0.5pt stroke may close up entirely. Print the reversed version at the smallest size the logo will be used, often on a business card or a pen, and examine the strokes under a loupe.

The silhouette recognition test applies the same principle to shape. If the logo is recognisable only when you can see the internal detail, it is not a robust mark. A true test: fill the logo shape entirely in black, so it becomes a solid silhouette, and ask if you can still identify the brand. If you cannot, the logo depends on its internal detail, which is fragile. The one-colour test forces the logo to stand on its silhouette alone. That is the standard every logo should meet.

You do not need a paid SaaS tool to run these four tests. For the WCAG contrast ratio, the W3C itself provides a free relative luminance calculator. Dozens of free browser extensions sample the solid fill correctly. For the favicon test, any image editor that lets you resize to 16 × 16 pixels with no smoothing will work. Inspect the raw pixels. For colour blindness, the W3C also documents the transformation matrices. Apply them manually in any pixel editor. The one-colour test is a print test, so you need a printer and a loupe. You can simulate the ink spread in a vector editor by adding a 0.25pt stroke in the same colour.

The antialiased-edge pixel false pass applies to all of these tools. A contrast checker that samples a screenshot will pick up the anti-aliased edge. A colour blindness simulation that runs on a compressed JPEG will produce artefacts. Use the original vector file. Export an SVG at the exact size and run the test on that. The SVG format is resolution-independent. It is the correct delivery format for web logos. Do not deliver a raster-only logo: a PNG at 300 PPI is still a raster file. It will not scale without interpolation. Always deliver the master logo as an SVG. Use the raster only for specific sizes where the platform requires it.

When a favicon fails, it is not a minor annoyance. It is the first impression a user gets of the brand, rendered at 16 pixels on a browser tab, a bookmark, or a mobile home screen. If the logo is illegible at that size, the user will not click it. They may not recognise the brand when they see it elsewhere. The favicon detail collapse is the reason companies like Google, Apple, and Microsoft have adopted simplified favicon variants. These are distinct at 16 pixels, even when the full logo is complex. The minimum-detail logo variant is not a compromise. It is a separate design asset that must be created deliberately.

Designing the logo at a large size and then scaling down is the wrong order. Design the favicon from the start, at 16 × 16 pixels, using a grid that accommodates the resolution. The silhouette recognition test works here too. A favicon that is a solid silhouette of the logo is more likely to be recognisable than one with fine detail. View the favicon at 16 pixels from a normal viewing distance of about 50 cm, not zoomed in. If you cannot identify it, neither can your users.

The colour blindness simulation tool is not about political correctness. It is about reach. When a logo fails for a deuteranopic viewer, the brand loses that viewer's attention. The average user sees thousands of logos a day. A logo that is illegible to a significant portion of the male population is a measurable loss. The issue is not limited to the logo itself. It extends to every application, from the website to the packaging. The tool is not a substitute for testing with real users, but it is a reliable first pass.

The most common mistake is to rely on the designer's own colour vision, which is often normal. The simulation tool removes the guesswork. Run it on the primary logo, the reversed logo, and the favicon. Check the contrast ratio between the logo and its backdrop under each simulation. If the ratio drops below 3:1 for any condition, the logo needs a colour adjustment or a shape adjustment. The outcome to avoid is the figure-ground separation collapse. It hides the logo entirely, not just its colour.

When a logo is printed on a packing slip, a receipt, or a fax cover sheet, it is printed in one colour, usually black. The one-colour legibility test is a requirement of everyday business. Print the logo in solid black on white, and in solid white on black. Read it from a distance of one metre. If the logo is not legible at that distance, it will not be legible on a package viewed from a shelf.

The reversed-out stroke closure problem is the most common flaw. Thin strokes of 0.5pt or less will close up when the ink spreads on the paper. Increase the stroke weight in the reversed version, or use a bolder weight of the typeface. The silhouette recognition test is the same idea. The logo must be recognisable as a solid shape. If it is not, it depends on internal detail that will not survive the press. The test is unforgiving. It catches the issue before the print run, not after.

You do not need a subscription for any of these. For the contrast ratio, use the W3C's own calculator or any tool that lets you enter hex values and shows the calculation. For the favicon, use a vector editor and export at 16 × 16 pixels, then zoom to 800% and inspect. For colour blindness, the W3C's matrices are public. Apply them in a script or use a free online simulator. The one-colour test requires a printer, but you can simulate the ink spread in a vector editor by adding a 0.25pt stroke in the same colour as the fill.

The antialiased-edge pixel false pass applies to all of these. When you test contrast, sample a solid fill, not a gradient. When you test the favicon, zoom to 800% to see the individual dots. When you test colour blindness, use the original SVG file, not a compressed screenshot. The tools are only as good as the input. A sloppy input produces a false pass.

Every logo must exist as an SVG. SVG is XML-based, resolution-independent, and the only format that scales perfectly from a favicon to a billboard. A raster-only production mistake occurs when a designer delivers a PNG or JPG as the only master file. The logo cannot be scaled without losing quality. The SVG file is the source of truth. From it you can generate every other format: PNG for the web, PDF for print, and ICO for the favicon.

The SVG format is the only one that supports the OpenType fsType embedding bit, which determines whether a font can be embedded in a PDF. When you export a PDF/X-4 print file, the fonts must be embedded, and the fsType bit must allow it. If the font is a free font under the SIL Open Font License, the server clause allows embedding. A proprietary font might not. The PDF/X-4 output condition supports live transparency and ICC colour management, but the font embedding permission is still a requirement. The SVG format sidesteps this by allowing you to convert text to outlines. That is a separate decision that affects editability.

When a logo goes to a commercial printer, deliver it as a PDF/X-4 file. PDF/X-4 is the ISO 15930-7 standard. It supports live transparency, ICC colour management, and layers. It is the professional standard for multi-page print documents and the format most commercial printers require. The export preset in a design application such as InDesign or Illustrator is not enough. Verify the preflight output intent, which includes the embedded ICC profile.

The most common mistake is exporting with an sRGB profile when the printer expects a Fogra 39 output intent. Fogra 39 is a German print-research association standard for coated paper. It specifies the CMYK colour space. If the logo is designed in RGB and converted at export with the wrong rendering intent, the printed result will be 10 to 15 percent darker and shifted toward magenta. The correct approach: soft-proof the design in the application using the printer's ICC profile and the ISO 3664 D50 viewing condition. That simulates the lighting under which the printed piece will be evaluated. The PDF/X-1a output condition flattens transparency and requires CMYK and spot colours only. It is for older workflows. PDF/X-4 is the one that supports live transparency.

Font embedding is controlled by the OpenType fsType embedding bit, stored in the OS/2 table of the font file. The bit determines whether a font may be embedded in a PDF. It has been a stable mechanism for two decades. Some fonts are marked "installable," meaning they can be embedded without restriction. Others are marked "print & preview," meaning they can be embedded but not edited. Ensure the font used in the logo permits embedding in the PDF/X-4 file. If it does not, the font will be substituted at the printer's RIP, altering the line endings and the page count.

The SIL Open Font License (OFL), version 1.1, is a permissive license that allows use, embedding, and modification, with a copyleft condition on derivative font files. The server clause in the OFL permits embedding in documents that are not themselves fonts. This is the license used by Google Fonts and by many open-source typefaces. A commercial font from a vendor such as Monotype may require a separate logo license or an EULA amendment for embedding. The font's licence is a legal document. If the licence does not permit embedding, the logo cannot be delivered as a PDF/X-4 file with the font embedded. Convert the text to outlines, which makes it uneditable for the client.

The WCAG contrast ratio is a mathematical formula. The tools that calculate it are only as good as the dots they sample. A contrast-checking plugin that samples a rendered screenshot will pick up the anti-aliased edge dots, which blend the foreground and background colours. These blended dots have a luminance between the two colours. The contrast ratio is inflated. The inflation can be as much as 1.5:1, which takes a failing logo and makes it appear to pass. The result is a contrast-failure rejection at the most public moment.

To avoid the false pass, sample the solid fill, not an edge. A tool that lets you input the hex values of the exact foreground and background colours is the only reliable option. The W3C's own calculator is free and precise. When the tool shows a passing ratio, visual verification at the actual rendering size is still required. The human eye is the final judge. The formula is the floor, not the goal.

The four tests are not separate activities. They are one workflow that must happen in order. First, run the contrast ratio test to ensure the logo is legible on its most common surfaces. Second, run the favicon test to ensure the logo is recognisable at 16 pixels. Third, run the colour blindness simulation to ensure the logo is distinguishable for the portion of the male population with a colour vision deficiency. Fourth, run the one-colour test to ensure the logo survives a single-ink print run. The order matters. A stumble in an earlier test will often cause a stumble in a later one.

The tools are free and the tests are fast. The only cost is the discipline to run them before delivering the final files. The four tests every logo must pass are not a mystery. They are standard practice in the craft. Skipping them is a failure of professionalism, not of talent.

What is the WCAG 2.2 contrast ratio for normal text?

The WCAG 2.2 minimum is 4.5:1 for normal text, 3:1 for large text (at least 18pt or 14pt bold), and 3:1 for UI components and graphical objects. This is defined by the W3C in the October 2023 standard.

Why does my logo look fine on screen but fails the favicon test?

On a 27-inch monitor, the logo is displayed at 200 pixels or more, which hides the detail collapse at 16 pixels. The favicon test forces you to render the logo at 16 × 16 pixels, where strokes become fractions of a pixel and vanish. A minimum-detail variant is the only fix.

Can I test colour blindness without a paid tool?

Yes. The W3C publishes the transformation matrices for deuteranopia, protanopia, and tritanopia. Apply them manually or use a free online simulator. The test is about shape separation, not colour beauty.

What does the one-colour test actually check?

It checks whether the logo is recognisable when printed in a single ink, typically black on white or white on black. It catches the reversed-out stroke closure problem, where thin strokes fill in on press, and the silhouette test, which requires the logo to be identifiable by shape alone.

If you are using a free font like those from Google Fonts, check the SIL Open Font License server clause before embedding it in a PDF/X-4 file, most designers do not, and a printer's preflight will reject the file.