How the Logo Checker measures.

What happens to your file.

The checker runs entirely in your browser. Nothing is uploaded: the page reads the file with the browser's own file and image APIs, draws it to a canvas on your device and does the maths there.

1. Format. The type is read from the first bytes of the file, not the file name: PNG, JPEG, WebP or SVG. Files over 20 MB are refused. So is a PNG, JPEG or WebP that stops before its own structure says it ends (a PNG with no end chunk and unfinished image data, a JPEG with no end-of-image marker after its last scan, a WebP shorter than its declared size), because a browser draws a file cut short by an interrupted download or save only as far as its data goes.
2. Pixels. A PNG, JPEG or WebP is drawn at its natural size. If its long side is over 2048 px, the browser's canvas reduces it to 2048 px first. An SVG is drawn with its long side at 1024 px, using the proportions of its width and height, or of its viewBox when it has no size. An SVG with no viewBox, width or height is drawn the way browsers show it: in a 300 x 150 px box, at its own coordinates, without scaling.
3. Analysis bitmap. The pixels are then area-averaged, if needed, so the long side is at most 1024 px. Every check below runs on this bitmap. Resolution and file size use the original file.
4. What is recorded. The checker page sends first-party usage events to Vellem: page views with the page title and the referring page, how far down the page you scroll (25, 50, 75 and 100%), and a random session ID that lasts until you close the tab. For the checker itself it records that it was opened, the file format, whether the file was chosen, dropped or pasted, the pass, warn and fail totals, a short reason code when a file cannot be read, and clicks on the links to the free preview. A page view and scroll depth are sent as they happen; the other events wait on your device until you answer the cookie banner. It never records the image, its name, its dimensions or its pixels. Analytics, advertising and chat tools from other companies load only if you accept all cookies.

Shared definitions.

Several checks rely on the same few measurements. Pixel values are 0 to 255 per channel; alpha is written as 0 to 1. Every threshold is applied to the measured value rounded to the precision the checker displays it at, so the badge always agrees with the number next to it.

Background: transparent or opaque

The border ring is every pixel within the corner-square size (2% of the short side, at least 1 px) of any edge. A pixel is clear when its alpha is at or below 0.05. The file has a transparent background if at least 50% of the ring pixels are clear, or if at least 10% of all pixels are clear. The second rule is for files trimmed tight to their artwork: a bold wordmark cropped to its edges puts ink along most of the ring, but the gaps between and inside its letters are clear. Otherwise the background colour B is taken from the ring: pixels with alpha of at least 0.5 are binned at 5 bits per channel, and B is the mean colour of the fullest bin. If compositing over B leaves no ink at all (see No logo found) while any pixel is clear, the shape is carried by the alpha channel alone, and the file is read as having a transparent background after all.

Ink coverage

Each pixel gets a coverage value m between 0 (background) and 1 (ink).

Transparent background:  m = alpha

Opaque background:       c' = alpha * c + (1 - alpha) * B      (composite over B)
                         d  = Euclidean distance from c' to B in RGB (0 to 441)
                         m  = clamp((d - 16) / (64 - 16), 0, 1)

Both:                    if m <= 0.1 then m = 0

The last rule stops faint haze, soft noise and near-invisible watermarks from counting as ink. A pixel with m <= 0.1 is a background pixel.

No logo found

An ink pixel has coverage of at least 0.5. If the analysis bitmap has fewer than 16 pixels with coverage of at least 0.5 (about a 4 x 4 px speck on a 1024 px bitmap), there is nothing to measure: contrast, legibility, padding, aspect ratio, colour count and circle crop all fail with the value No logo found and the number of ink pixels counted, and the summary says No logo found in this file instead of listing them. Resolution, transparency and file size describe the file itself, so they are still judged, but their advice notes that no logo was found. This usually means an empty export, the wrong layer, or a file that is one flat colour.

Ink bounding box

Pixels with coverage of at least 0.25 count toward the box. A column is inked when it holds at least max(1, round(height / 512)) such pixels, and a row when it holds at least max(1, round(width / 512)), so a single stray pixel on a large canvas does not stretch the box.

Solid pixels and edge ink

A solid pixel has coverage of at least 0.9, all four neighbours also have coverage of at least 0.9, and no colour channel differs from any neighbour by more than 32. Anti-aliased edges fail this test by construction, which is how the colour and contrast checks ignore them.

Edge ink is the solid pixels that sit within r = max(2, round(long side / 256)) px (a square neighbourhood) of a background pixel or of the canvas edge. That is 4 px on a 1024 px bitmap. Edge ink is where the logo meets whatever it is placed on. If there are fewer than 64 edge pixels, all solid pixels are used; if there are fewer than 64 solid pixels, every pixel with coverage of at least 0.5 is used.

Colour clusters

Selected pixels are binned at 4 bits per channel (4,096 bins), weighted by coverage. Bins are visited from heaviest to lightest; each joins the nearest existing cluster if it is within Delta E 12 (CIE76, in CIE L*a*b* under D65), and otherwise starts a new one. Clusters are then merged pairwise while any two are within Delta E 12. A cluster's colour is the weighted mean of its pixels.

Area averaging

Every resize, including the 16 and 32 px renders, is an exact box filter: each output pixel is the average of the source area it covers, with partial pixels weighted by overlap and colour weighted by alpha (premultiplied), so transparent pixels never darken an edge.

1. Resolution

Measures the shortest side of a bitmap at its natural size. An SVG counts as vector.

Why it matters. High-density screens draw more than one device pixel per CSS pixel, commonly two or three, so a bitmap looks sharp only up to about half its pixel size or less. A 512 px file stays crisp in a 256 px slot on those screens. Print and signage need vector.

Limits. Pixel count says nothing about sharpness: an upscaled, blurry 2000 px file passes. Live text in an SVG renders in a substitute font on any device without that font, so we flag it. A wide wordmark can be short on its shortest side yet fine in a header; read the number, not only the badge.

2. Transparent background

Measures whether the file has an alpha channel in use, whether its background is transparent (see definitions), and how many of its four corners are clear. A corner is clear when the mean alpha of a square at that corner, 2% of the short side, is at or below 0.05.

Why it matters. A logo with a solid background shows as a box on any coloured page, photo or dark mode.

Limits. A deliberate plate or badge is a design choice; the warning is a reminder to keep a plate-free version too, not a verdict on the design.

3. Contrast on light and dark

Measures the WCAG contrast ratio between the edge-ink colour clusters and two backgrounds: white, #FFFFFF, and near-black, #111111.

Linearise each sRGB channel c (0 to 1):
  c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4
Relative luminance:   L = 0.2126 R + 0.7152 G + 0.0722 B
Contrast ratio:       (L_lighter + 0.05) / (L_darker + 0.05)

For each background:
  share = sum of the edge-ink cluster weights whose ratio, rounded to
          2 decimals as shown, is at least 3:1

Why a single colour never fails. Any colour with a relative luminance between about 0.117 and 0.30 reaches 3:1 on both backgrounds, anything darker reaches it on white, and anything lighter reaches it on near-black. So every colour works on at least one side, and a one-colour logo can only pass or warn, unless there is too little ink to measure at all (see No logo found). A fail needs at least two colours pulling in opposite directions, such as a navy mark with a pale yellow accent.

Why edge ink. Only the colours that touch the page need to stand out from it. White lettering inside a dark badge is surrounded by the badge, not the page, so counting it would give a false warning on white.

Why 3:1. It is the minimum WCAG 2.2 sets for graphical objects in Success Criterion 1.4.11, Non-text Contrast. WCAG itself exempts logos: Success Criterion 1.4.3 says text that is part of a logo or brand name has no contrast requirement. We use 3:1 as a practical line for whether a shape reads against its background, not as a compliance test.

Opaque files. For a file with its own background, the check measures the ink as if that background were removed, which is how the logo will look once it is, and also reports the ratio against the file's own background colour.

Files on a plate. When the border is opaque but at least one corner is clear (a rounded app icon or a badge), the plate is what meets the page. The plate colour is measured against white and near-black using the same rules, and the edge ink is measured against the plate. If less than 90% of that ink reaches 3:1 against the plate, a pass becomes a warn.

Limits. Real backgrounds are rarely pure white or #111111: photos, brand colours and gradients need their own look. Contrast ratio is a luminance measure and does not capture hue clashes or how colour-blind viewers see two colours of similar lightness.

4. Small-size legibility

Measures how much of the mark still lands on whole pixels when drawn at favicon sizes, as opposed to smearing into partial grey.

1. Crop to the ink bounding box and centre it in a square of side max(ink width, ink height).
2. Area-average the coverage m of that square down to N x N, for N = 16 and N = 32.
3. For each rendered pixel with coverage v:
     v < 0.2          empty
     0.2 <= v < 0.8   mush (partial, neither ink nor background)
     v >= 0.8         solid
4. visible = empty pixels excluded;  mush share = mush / visible

Reference shapes. On a 512 px canvas these give, at 16 and 32 px: a filled disc, 10% and 4% mush (pass); a filled square aligned to the grid, 0% and 0% (pass); a ring whose stroke is one twelfth of the canvas, 55% and 24% (warn); a ring whose stroke is one thirty-second of the canvas, 100% and 54% (fail). The self-test that ships with the checker recomputes these.

Why it matters. Browser tabs, bookmarks and app switchers show your mark at 16 to 32 px. Strokes thinner than a pixel at that size turn into a grey smudge, and the mark stops being recognisable.

Best case on purpose. The crop removes the file's own padding, so empty canvas never counts against legibility here (the padding check handles it).

Limits. The measure sees blur, not meaning. Fine gaps that close up into a solid block at small sizes produce solid pixels, not mush, so a mark can pass while its letters merge; look at the 16 px preview. It also cannot tell whether a simplified shape is still recognisable as your brand.

5. Padding and bounds

Measures the empty margin between the ink bounding box and each canvas edge, and how much of the canvas the logo spans.

margins     = left, right, top and bottom gaps between the ink box and the canvas edges
min margin  = smallest margin / short side of the canvas
fill        = max(ink width / canvas width, ink height / canvas height)
edge share  = share of pixels along one edge with coverage of at least 0.5

Why it matters. Rounded containers, avatars and tight layouts clip ink that touches the edge. At the other extreme, a logo floating in empty canvas looks small wherever the file is placed at a fixed size.

Limits. Some teams export tightly cropped files on purpose and add clear space in layout; for them a warning here is expected. A file trimmed to its artwork has ink on opposite edges, so it gets that warning even where a straight stroke runs along an edge; a logo cut off on two opposite sides looks the same to the checker, so it also only warns. A soft shadow or glow counts as ink.

6. Aspect ratio and favicon fit

Measures the ratio of the ink bounding box's long side to its short side, and the size the ink would have if fitted into a 16 px square.

ratio = max(ink width, ink height) / min(ink width, ink height)
size in a 16 px favicon = 16 x max(1, round(16 / ratio)) px

Why it matters. Favicons and app icons are square. A 4:1 wordmark fitted into 16 px is 4 px tall, which nobody can read; a separate symbol, monogram or initial does that job.

Limits. A fail here is about icon use only. A wide wordmark can be exactly right for a site header.

7. Colour count

Measures distinct flat colours in the ink, ignoring anti-aliasing. Solid pixels (see definitions) are clustered; a cluster counts as a colour when it holds at least 1% of the solid ink. The residual is the share of solid ink in clusters below 1%, which is high for gradients, shading and texture.

Why it matters. Embroidery, stamps, engraving, single-colour print and many small uses need a one or two colour version. Flat colours also reproduce more consistently across screens and printers.

Limits. The background colour of an opaque file is not counted. Two shades within Delta E 12 count as one colour even if the difference is intentional. A colourful logo can be excellent; the check only tells you what reproduction will need.

8. Circle crop for avatars

Measures how much ink would be cut off if the file were used as a round profile picture.

S = min(canvas width, canvas height)     the centre S x S square of the file
circle = centre of the canvas, radius S / 2
outside share = sum of m for pixels whose centre lies outside the circle / sum of m

fit scale = (S / 2) / distance from the ink box centre to the farthest corner
            of any pixel with coverage of at least 0.25
suggested scale = floor(min(1, fit scale) x 95%)

Why it matters. Many social and messaging platforms display profile pictures as circles, which trims the corners of a square image. A square badge that fills its canvas loses about a fifth of its area.

Why the centre square. Avatar upload tools fill the crop from the image; they do not shrink a wide file to fit inside a square. GitHub's cropper keeps a square no larger than the image's short side, and Mastodon resizes avatars by cropping to fill. So a 4:1 wordmark shows only about its middle quarter, and the check measures that square.

Limits. Upload tools usually let you move the square and zoom in, but not zoom out past the short side, so on a wide or tall file the ends are cut however you frame it. Some platforms use rounded squares instead of circles. The 0.5% pass line tolerates anti-aliasing at the circle's edge.

9. File size for the web

Measures the file's size in KB, where 1 KB is 1,024 bytes.

Why it matters. A header logo is downloaded on every page view, often before the content. Its bytes are paid again by every visitor on a slow connection.

Limits. These lines are our judgement for a single logo file, not a standard. A large master file you keep for print is fine; this check is about the copy you put on a web page. The file size of your exact upload is measured, so a master exported at 4000 px will fail even if the web copy you actually serve is small.

The summary, and why there is no score.

The summary lists how many checks fail, warn and pass, and names the failing checks first. When no logo is found in the file, it says so instead of naming six failures. It does not add them up. A single number would hide which problem you have, and weighting nine different properties against each other would be a judgement dressed up as a measurement. A logo with one failing check can still be the right logo; the checks tell you where it will need a variant or a fix.

What an automated check cannot judge.

Everything above is measured from pixels. None of it says whether a logo is good. In particular, the checker cannot judge:

• Originality. It does not compare your file with other logos, so a copy of an existing mark can pass every check.
• Trademark conflicts. Whether you can register or safely use a mark depends on existing rights in your markets. That takes a trademark search and, for anything important, a qualified lawyer.
• Fit to the business. Whether the logo suits your audience, your price point, your name and the way you talk is a human judgement.
• Meaning and associations. Unintended shapes, readings or cultural connotations are invisible to a pixel count.
• Printed colour. Screen colours are sRGB values; how they print depends on the printer, the paper and the colour conversion.

Known measurement limits.

• Colour profiles. Browsers may convert a file with an embedded colour profile before the page can read its pixels, so measured colours can differ slightly from the values in your design tool.
• Browser rendering. SVG rasterisation, and the canvas reduction applied to bitmaps over 2048 px, come from your browser, so results for those files can differ slightly between browsers. Bitmaps up to 2048 px are read at their natural size; in our tests, PNG files gave identical results in Chrome and in the Node self-test that runs the same code.
• SVG features. Browsers do not load external files, scripts or web fonts inside an SVG drawn as an image, so linked images and live text may render differently from your design tool. The checker notes when it sees them.
• Busy backgrounds. For an opaque file, ink is anything that differs from the border colour. On a photo or gradient background that separation is approximate, and the checker says so when less than 60% of the border matches the background colour.
• Shadows and glows. Soft effects count as ink wherever their coverage is above 0.1, which can affect padding, bounds and circle crop.
• Thresholds are choices. Every line on this page is a published judgement, tested against simple reference shapes. Where a number sits close to a threshold, look at the previews rather than the badge.

Changes to this method.

When a formula or threshold changes, the version number goes up and the change is listed here.

• Version 1.0, 14 September 2026. First published version.