Color contrast checker
How to use a color contrast checker on logo artwork: what the ratio measures, which accessibility guidelines apply to logos, and how to test colorways for color vision differences.
Contents
The short answer
A color contrast checker compares two colors, usually a foreground and a background, and reports their contrast ratio. The ratio is based on relative luminance, which is how light or dark each color appears, and not on hue. For a logo, you enter each fill color from the vector artwork alongside each background the logo will sit on, then read the ratio. The ratio runs from 1:1, which means no difference, to 21:1, which is black on white. Because the ratio depends on lightness rather than hue, a logo that passes is far more likely to stay legible for people with color vision differences. Two colors can look clearly different to one viewer and nearly identical to another while having very similar luminance. Red and green of similar lightness are a common example.
In vector artwork, a fill is the color inside a closed path, such as a letterform or a shape, and a stroke is the color applied along a path's outline. Every fill and stroke that carries meaning, and every background the logo is placed on, forms a color pair you can check.
What accessibility guidelines actually require for logos
Most accessibility contrast checkers report results against the Web Content Accessibility Guidelines (WCAG). WCAG's text contrast criterion sets 4.5:1 for normal text and 3:1 for large text. It also explicitly exempts text that is part of a logo or brand name, so WCAG does not require a logo to meet any text contrast ratio. A separate WCAG criterion sets 3:1 for user interface components and for graphics needed to understand content.
In practice, treat the ratios as design targets rather than legal pass marks for the logo itself. A common recommendation is to aim for at least 3:1 between the logo and its background, and higher for small or thin artwork. If the logo also works as a control, such as a home link in a site header, that link must still be identifiable. A clear accessible name and visible focus styling are part of meeting that requirement, not just the logo's colors. The supplied evidence contains no brand-specific or client-specific contrast thresholds. Confirm any contractual or brand-guideline requirements separately.
Checking a logo on different backgrounds, step by step
- 1. List every colorway the logo ships in, such as full color, single color, reversed (light on dark) and black or white versions.
- 2. List every background each colorway is approved for, including brand colors, white, black, and any common photo or texture placements.
- 3. Read the exact color values from the vector file rather than sampling a screenshot. Check the fill and stroke values of the paths in the artwork, because screenshots can shift colors and blend edges.
- 4. Enter each meaningful logo color against each approved background in the contrast checker and record the ratio.
- 5. Check internal contrast as well. If the mark relies on two adjacent colors to show a shape, test those two colors against each other.
- 6. View the logo through color vision deficiency simulations, typically protanopia, deuteranopia and tritanopia, and also in pure grayscale. If parts of the mark merge or disappear, the design depends on hue alone.
- 7. Test at the smallest size the logo will be used. Thin strokes and fine counters, the enclosed spaces inside letters, lose visible contrast faster than the ratio suggests.
- 8. Record which colorway is approved for which background, and mark failing combinations as not permitted in the usage guidelines.
The formula behind the number
Checkers that follow WCAG calculate the ratio from the relative luminance of the lighter color (L1) and the darker color (L2):
contrast ratio = (L1 + 0.05) / (L2 + 0.05)Relative luminance is calculated from sRGB values. This means the checker is measuring screen color. It does not directly describe printed ink, coated or uncoated paper, or spot colors, which are premixed inks specified by a color system rather than built from process inks.
Where a checker can mislead you
- Gradients and transparency: a checker compares two flat colors. For a gradient fill or a semi-transparent element, test the point with the lowest contrast, not the average.
- Photos and textured backgrounds: sample the lightest and darkest areas where the logo will actually sit, or specify a solid backing shape or a single-color version for busy images.
- Print delivery: after converting artwork to CMYK or to spot colors, the on-screen values may change. Re-check the converted values, and treat a printed proof as the final test, since the supplied evidence gives no print-specific thresholds.
- Passing is not the same as distinguishable: a passing ratio confirms a luminance difference, but a simulation and grayscale check confirm whether the shapes remain readable.
Fixing a failing combination
If a pair fails, there are three common ways to fix it. You can adjust the lightness of one color while keeping its hue. You can supply an alternate colorway, such as a reversed or single-color version, for that background. Or you can add separation, such as a contrasting outline stroke or a solid shape behind the mark. When two adjacent colors inside the mark are too close in luminance, adding a gap or a keyline gives the shapes a boundary that does not depend on color perception.
Contrast results describe how the colors perform, not whether the file is suitable or the logo may be reused. A file extension such as SVG, EPS or PDF does not prove the artwork is fully vector or editable, or that you are permitted to modify the colors. Confirm both before you produce new colorways.