Accessible Logos: Contrast Ratios That Include Everyone
Accessible logos need strong WCAG contrast, so test colors, type and spacing for every viewer.
Why contrast includes everyone
About 1 in 12 people struggle with low vision or color deficits, and weak logo contrast locks them out in under 5 seconds. WCAG demands 4.5 to 1 for normal text and 3 to 1 for large graphics above 24 pixels on websites and apps.
Accessible marks also perform better because high-contrast logos lift recall by 22 percent in sunlight and low-light tests. Make the logo online with a contrast checker open and verify 3 lockups: color, mono black and mono white.
WCAG rules for logo teams
Set body lettering above 14 points bold or 18 points regular, then measure every color pair with a free ratio tool until it passes. Add 2 pixel outlines or scrims when brand hues fall below 3 to 1 against busy photo backgrounds.
Never rely on color alone since 8 percent of men miss red-green cues, so pair hues with shapes, labels or patterns. Export accessible SVG files with titles and test at 200 percent zoom plus grayscale.
- Hit 4.5 to 1 text contrast
- Keep 3 to 1 for large graphics
- Type above 14pt bold minimum
- Never use color alone
- Test zoom and grayscale