WCAG Color Contrast for Logos: What the Rules Require and How to Check Your Artwork
How WCAG color contrast applies to logos, what a contrast checker measures, and how to test vector logo colors for visibility across color vision differences.
Contents
The short answer
WCAG color contrast is a measurable ratio between the relative luminance of two colors, such as a foreground and its background. The Web Content Accessibility Guidelines set minimum ratios for text and for meaningful non-text graphics. Logos are a special case: WCAG explicitly exempts text that is part of a logo or brand name from its text contrast requirements. A logo can therefore be WCAG-conformant on paper and still be hard to see, especially for people with low vision or color vision differences. The practical goal for a logo is visibility rather than formal compliance, and the same ratio math and checker tools are the most useful way to judge it.
What WCAG actually specifies
The contrast thresholds most people mean when they search for WCAG color contrast come from WCAG 2.x. They are expressed as ratios from 1:1 (no difference) to 21:1 (black on white).
| Requirement | Applies to | Minimum ratio |
| Contrast (Minimum), Level AA | Normal-size text | 4.5:1 |
| Contrast (Minimum), Level AA | Large text (roughly 18 pt regular or 14 pt bold and larger) | 3:1 |
| Contrast (Enhanced), Level AAA | Normal-size text | 7:1 |
| Contrast (Enhanced), Level AAA | Large text | 4.5:1 |
| Non-text Contrast, Level AA | User interface components and graphical objects needed to understand content | 3:1 |
Both text contrast criteria state that logotypes, meaning text that is part of a logo or brand name, have no contrast requirement. The non-text contrast criterion covers graphics needed to understand content and includes an exception where a particular presentation is essential. Whether a logo used as a functional element, such as a home link or an icon-only button, falls under the non-text rule is a judgment call for the specific use, not something the guidelines settle for every case. A conservative approach is to aim for at least 3:1 between a logo's key shapes and its background wherever the logo does a job beyond decoration.
Why contrast matters for color vision differences
The WCAG ratio is based on luminance, the perceived lightness of a color, not on hue. This is deliberate. Many people with color vision differences, such as red-green deficiencies, can still distinguish light from dark even when two hues look similar to them. A red mark on a green field may read as two clearly different colors to one viewer and as near-identical shapes to another if the two colors have similar lightness. Checking the luminance ratio exposes that problem directly.
A related principle, Use of Color, says color should not be the only way information is conveyed. For logos, this means a mark that depends on two same-lightness hues to separate its parts, such as a symbol from its container, is fragile. Adding a lightness difference, an outline, a gap or a shape distinction makes the design hold up regardless of how hues are perceived.
How the contrast ratio is calculated
Every WCAG color contrast checker uses the same published formula. Each sRGB channel is converted to a linear value, the channels are weighted into a relative luminance, and the two luminances are compared.
For each channel C in sRGB (0–1):
if C <= 0.03928: C_lin = C / 12.92
else: C_lin = ((C + 0.055) / 1.055) ^ 2.4
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05)The heavy weighting on green and light weighting on blue explain why some saturated colors that look bold, such as a strong blue, can still produce a low ratio against black, while a pale yellow may fail against white.
Using a contrast checker on logo colors
A contrast checker, including the widely used WebAIM tool, takes two colors, typically as hex values, and reports the ratio along with pass or fail results for the WCAG text and graphics thresholds. The tool itself is simple; the work for a logo is supplying the right color pairs.
- Take color values from the source artwork, not from a screenshot. Open the vector file in an editor and read the fill and stroke values of the actual shapes.
- Test every pair that has to be distinguished: each logo element against the background it will sit on, and adjacent elements within the mark if their separation carries meaning.
- Test against each intended background, such as white pages, dark headers, brand-color panels and photographs, since one logo color can pass on one and fail on another.
- Treat the text thresholds as a reference for wordmarks even though logotypes are exempt; a wordmark that meets 4.5:1, or 3:1 at large sizes, will be readable for more people.
- Where a pair fails, plan a variant, such as a one-color, reversed or outlined version, rather than relying on one full-color file everywhere.
Vector artwork, embedded images and previews
A checker compares two flat colors, so it only gives a clean answer when the logo uses flat fills. Whether a file contains editable vector paths with defined fills cannot be inferred from its filename or extension. An SVG, EPS, AI or PDF can wrap an embedded raster image, and a raster preview of the logo may show colors that differ from the source fills because of compression, color profile conversion or anti-aliasing. Confirm in an editor that the shapes are real vector objects and read their assigned colors.
Gradients, transparency, blend modes and embedded photographic textures do not have a single color. For these, check the lowest-contrast region against the background, or sample several points; a single average value can hide a failing area. Logos placed over photographs need the same treatment, since the background changes from one placement to the next.
Checking is not permission to change
Measuring a logo's contrast requires nothing more than its color values, but adjusting the colors is a different matter. Being able to download a logo file does not grant permission to modify its artwork, alter its fonts or use its trademarks. If a brand you do not own fails a contrast check, the appropriate step is to look for an approved alternate version in the owner's brand guidelines or to ask the owner, not to recolor the mark yourself.
Gaps in this assessment
No specific logo, color values or test results were supplied, so this article gives no measured ratios or pass/fail verdicts for any particular design. The thresholds and formula above reflect WCAG 2.x; newer contrast methods under discussion for future WCAG versions are not covered here, and the guidelines themselves remain the authority if any detail is in doubt.