Your logo is the first thing people see, but if it fails logo color accessibility standards, a huge slice of your audience will miss it entirely. Around 300 million people worldwide live with color vision deficiency, and millions more navigate low vision or contrast sensitivity issues. A logo that disappears against its background isn’t just bad design, it’s a compliance risk and a brand visibility problem.
This guide breaks down the WCAG contrast rules that apply to logos, shows you real-world examples of logos that pass and fail, and gives you a no-nonsense checklist you can run before approving any brand asset in 2026.
Do Logos Actually Have to Meet WCAG Contrast Rules?
Here’s the nuance most designers miss: under WCAG 2.2, pure logotypes and brand marks are technically exempt from text contrast requirements. The exact wording from the success criterion 1.4.3 (Contrast Minimum) reads: “Text that is part of a logo or brand name has no contrast requirement.”
But that exemption is narrower than it sounds. The moment your logo does any of the following, contrast rules kick in:
- The logo acts as a clickable link (like a homepage link in your header)
- The logo functions as a navigation control or interactive UI element
- The logo conveys meaningful information beyond branding
- The logo includes an embedded tagline or descriptive text
According to Section508.gov, when a logo functions as a link it must hit at least a 3:1 contrast ratio with surrounding colors. And if your brand cares about inclusivity (and your legal team cares about ADA lawsuits), you should aim higher anyway.
The WCAG Contrast Ratios You Need to Memorize
Contrast is measured as a ratio between the luminance of two colors, ranging from 1:1 (no contrast) to 21:1 (black on white). Here are the thresholds that matter:
| Element Type | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text (under 18pt) | 4.5:1 | 7:1 |
| Large text (18pt+ or 14pt bold) | 3:1 | 4.5:1 |
| Logo as link / interactive | 3:1 | 3:1 |
| Logo tagline (decorative text) | 4.5:1 | 7:1 |
| UI components / icons | 3:1 | 3:1 |
Real Logo Examples: Pass or Fail?
Logos That Pass with Flying Colors
- FedEx (purple #4D148C on white): Contrast ratio of 9.36:1. Passes AAA easily.
- IBM (blue #1F70C1 on white): Around 4.6:1. Passes AA for text-equivalent use.
- Coca-Cola (red #F40009 on white): About 5.8:1. Solid pass for AA.
Logos That Quietly Fail
- Light gray wordmarks on white headers: A trendy choice in SaaS branding, but #CCCCCC on white sits at 1.6:1. Fails everything.
- Yellow on white: Common in food and energy branding. McDonald’s yellow #FFC72C on white hits only 1.7:1. Fine when paired with red, fails on its own.
- Pastel-on-pastel duotone logos: Pink on peach, mint on cream, all popular in 2026 minimalist branding. Most fall under 2:1.
Your Logo Accessibility Checklist
Run every new logo (and every refresh of an existing one) through this list before sign-off:
- Test the primary logo against every approved background color, not just white.
- Check the logo-as-link version if it sits in a clickable header. Minimum 3:1.
- Isolate the tagline if present and test it as regular text (4.5:1 minimum).
- Convert to grayscale to see if the logo still reads without color cues.
- Simulate color blindness using deuteranopia, protanopia, and tritanopia filters.
- Test at small sizes, especially favicons and mobile header logos.
- Verify on dark mode backgrounds if your site or app supports it.
- Provide an alternate version for problematic backgrounds (inverted or outlined).
- Add proper alt text describing the logo for screen readers.
- Document approved color pairings in your brand guidelines.
Tools to Test Logo Contrast in 2026
You don’t need to calculate luminance ratios by hand. These free tools do the heavy lifting:
- WebAIM Contrast Checker: The industry standard. Paste two hex codes, get an instant WCAG verdict.
- Stark (Figma/Sketch plugin): Tests contrast directly inside your design file and simulates color blindness.
- Adobe Color Accessibility Tools: Built into the Adobe Color web app, ideal during palette creation.
- Accessible Web Contrast Checker: Includes AAA and large-text breakdowns side by side.
- Coolors Contrast Checker: Useful when building palettes from scratch.
- Chrome DevTools: The built-in color picker now displays live WCAG ratings in the Elements panel.
Common Mistakes That Tank Logo Accessibility
1. Designing in a vacuum
Logos are approved on a designer’s white artboard, then deployed on red marketing banners, navy blue headers, and yellow promo backgrounds. Test every real-world placement.
2. Forgetting the favicon
A 16×16 pixel favicon with three colors and a thin stroke is often unreadable. Simplify and test at actual size.
3. Relying only on color to communicate
If your logo’s two color variants mean different things (active vs inactive, premium vs basic), users with color blindness can’t tell them apart. Add a shape, weight, or text difference.
4. Ignoring focus states
When your logo is a header link, its focus outline must also meet 3:1 contrast against the background. Default browser outlines often fail on custom-colored headers.
Why This Matters Beyond Compliance
Accessible logos perform better across the board. They render clearly on low-end screens, survive print degradation, work on signage viewed from a distance, and stay legible in dim lighting. Designing to logo color accessibility standards isn’t a constraint, it’s a quality filter that makes your brand stronger everywhere.
And with the European Accessibility Act fully enforced as of June 2025 and ongoing ADA Title III litigation in the US, brands that ignore accessibility are now openly exposed to legal and reputational risk.
FAQ
Are logos legally required to meet WCAG contrast ratios?
Pure brand logos are exempt from WCAG text contrast rules, but logos that function as links or interactive elements must meet a 3:1 ratio. Many accessibility laws reference WCAG 2.1 or 2.2 AA as the legal benchmark, so the exemption is thin in practice.
What contrast ratio should a logo have?
Aim for at least 3:1 for any logo that’s clickable or sits on UI elements, and 4.5:1 if it includes a tagline or descriptive text. Going for 7:1 (AAA) future-proofs your brand.
Can I use a low-contrast logo if I add alt text?
Alt text helps screen reader users, but it doesn’t help people with low vision who can see your logo but can’t distinguish it from the background. You need both alt text and proper contrast.
How do I test if my logo works for color-blind users?
Use simulation tools like Stark, Coblis, or the built-in color vision filters in Chrome DevTools. Test for deuteranopia (red-green), protanopia, and tritanopia (blue-yellow) at minimum.
What’s the safest color combination for a new logo in 2026?
Dark navy, deep purple, or black on white backgrounds consistently pass AAA. If you need color, pair a saturated mid-tone (not pastel) with white or near-black for reliable contrast across contexts.