Logos are everywhere. They’re on websites, apps, business cards, and coffee cups. But not all logos are easy to see, especially for people with vision disabilities. That’s where contrast ratios come in. If you want your logo to be readable and inclusive, you’ve got to play by the rules—specifically, the WCAG rules.
TL;DR
WCAG (Web Content Accessibility Guidelines) sets the standards for accessibility. For logos, contrast ratios matter if there’s text involved. Aim for a 4.5:1 contrast ratio at minimum for readable text. If your logo has no readable text, you get more flexibility—but designing for inclusion is always a smart move!
What’s a Contrast Ratio Anyway?
A contrast ratio compares the difference in brightness between two colors. Think black on white (high contrast) versus yellow on white (low contrast). The higher the difference, the easier it is to read.
Contrast ratios range from 1:1 (same color) to 21:1 (black on white or white on black). The WCAG has specific standards based on this scale.
Why Should I Care?
Because it’s 2024, and everyone deserves access to your brand. Whether you’re building a website or designing an app, someone with visual impairments could be your user. Make sure they can read your logo too!
Let’s Talk WCAG Levels
WCAG has three levels of compliance:
- A: The bare minimum
- AA: The sweet spot (and the legal target for most organizations)
- AAA: Super accessible (and super strict)
For most logos, we aim for AA level. That means following specific contrast ratios when text is part of the logo.
When Does the Contrast Ratio Matter for Logos?
This is where many people get confused. Here’s a cheat sheet:
- If your logo has text (like your company name): it needs to meet contrast requirements
- If your logo is purely graphical (like a symbol or icon): it’s exempt from the rules—technically
- But if you can read any words in that image, it counts as text
Minimum Contrast Ratios for Text
Here’s what you need, according to WCAG 2.1:
- Normal text: Minimum ratio of 4.5:1
- Large text (18pt + or 14pt bold): Minimum ratio of 3:1
So if your logo has small text, aim for 4.5:1 or higher. If your text is big or bold, you can go for 3:1, but higher is always better.
But My Logo Is a Brand Asset!
We get it. Your logo may have colors chosen by designers and branding teams years ago. Changing them could make marketing scream. But here’s the secret:
You don’t have to redesign your logo—just provide an accessible version.
You can create a high-contrast alternative for digital use. This ensures the logo meets WCAG when it appears on your website or app. Your full-color version can still exist for print or branding materials.
Making Your Logo Accessible (Without Ruining It)
Here are a few easy tips to keep your logo readable:
- Test your contrast. Use online tools like the WebAIM Contrast Checker
- Add outlines or backgrounds. If your text blends into the background, a solid background shape or glow can fix it
- Drop shadows help, but only if they increase contrast—not just decorate
- Have multiple versions of your logo: dark mode, light mode, high contrast, and full-color
“Graphic” Logos vs “Text” Logos
Need help figuring out what counts as text? Here are two examples:
- Apple logo: No text. Just an icon. Doesn’t need to meet contrast requirements
- Google logo: Spells out the name. Needs readable contrast
If your logo is just a shape or symbol, you’re good. If someone needs to read it to know your company’s name, contrast counts.
Touching on SVGs and Modern Web
Logos are often added to sites as SVG files. That’s perfect, because SVGs are flexible and editable. You can change colors, add outlines, and make them responsive to users’ environments.
Example: Switch to a high-contrast version of your logo when the site switches to dark mode. MAGIC!
What Happens If I Ignore the Rules?
Accessibility lawsuits are real. If your digital assets don’t meet standards, your company could face:
- Fines or legal action (especially in the U.S.)
- Bad press
- Lost customers who can’t see or read your site
All that over a logo? Yep. It’s worth fixing.
Quick Logo Accessibility Checklist
- ✅ Does your logo include readable text?
- ✅ Have you tested the contrast against background colors?
- ✅ Do you provide a high-contrast alternative version?
- ✅ Have you checked it in dark mode and light mode?
Tools to Help
Not sure if your logo passes the test? These tools are your new best friends:
Bonus Tip: Don’t Forget Alt Text
Logos are often images. Add alt text to describe the logo for screen readers:
<img src="logo.svg" alt="Company Name logo">
If your logo is decorative only and provides no important information, you can use alt="" to hide it from screen readers.
Wrap-Up: Make It Bold and Readable
Design is about communication. If your design isn’t readable, it’s not doing its job. Logos are often the first thing people see. Let’s make sure everyone can see them—regardless of ability.
Choosing good contrast isn’t just about compliance; it’s about being human-centered. And honestly, it just looks better.
Cheers to good design, big ideas, and contrast you can stand behind.
