Color choices aren’t just about branding—they’re about inclusion. When we design software, we shape who can (and can’t) use it. If your color palette doesn’t meet accessible contrast standards, you’re creating barriers. For users with low vision, color blindness, or temporary impairments (like a cracked screen in bright sun), low contrast can make key content unreadable—or invisible altogether.
That’s not just frustrating. It’s exclusionary. And depending on your industry, it might even open you up to legal risk.
But here’s the good news: accessible color contrast and strong visual design aren’t at odds. You can build a palette that’s on brand, beautiful, and fully WCAG-compliant. You just need the right tools—and a little upfront intention.
Brands Getting It Right: Accessibility Meets Aesthetics
These companies prove that accessible contrast can coexist with standout visual design:
Airbnb
Airbnb revamped its design language with accessibility top of mind. Their updated palette maintains warmth and brand distinctiveness while ensuring sufficient contrast across text, backgrounds, and interactive elements.
Spotify
Spotify pairs bold color and dark UI themes with strong contrast in buttons, navigation, and text. Accessibility is integrated into both their product design and branding—not bolted on.
Slack
Slack’s interface balances whimsy with usability. Their themes offer users control over contrast, and their default color scheme has been tuned for legibility — even in message-dense environments.
Resources to Support Accessible Color Contrast
Designing for accessibility isn’t just about running your colors through a checker. It’s about building awareness into your process—from early exploration to shipped UI. These resources offer both practical tools and helpful ways of thinking.
1. Figma’s Built-in Contrast Checker
Best for: Seamless, in-the-moment contrast checks
Figma flags whether your text/background combination meets WCAG AA or AAA standards—no plugins required.
2. Accessible Palette
Best for: Building full-color systems from scratch
Accessible Palette generates tints and shades that stay accessible across UI states like hover, focus, and disabled—perfect for systems with tonal or layered color schemes.
3. Stark (Figma Plugin)
Best for: Comprehensive accessibility checks inside Figma
Stark simulates color blindness, checks contrast, and flags issues—all from within your design file.
4. Accessible Color Palette Generator
Best for: Simple palettes based on a primary color
Paste in a primary brand color and instantly see which foreground/background combos pass WCAG guidelines. Simple, visual, and fast, plus a demo area to play around with.
5. Color Contrast “Cheat Sheet” by Billy Sweeney
Best for: Quick reminders and practical framing
This LinkedIn post lays out a smart, visual guide to color contrast, with reminders about thresholds, size considerations, and state changes. Great for sharing with your team or bookmarking as a quick gut-check.
Don’t Stop at Contrast
Color contrast is a crucial starting point—but it’s just that: a start. True accessibility includes focus styles, keyboard navigation, semantic markup, and screen reader support. If your product only meets contrast ratios, it’s still leaving people behind. But contrast is visible. Tangible. Easy to test. With the right resources, there’s no excuse not to get it right—and once you do, it builds momentum for better decisions everywhere else in the product.
One Final Thought
Your color palette isn’t just about visual identity — it’s about usability. Every color pairing is a signal: “This was made with you in mind” or “You’re not part of the picture.” Designing with contrast in mind makes your product better for everyone. It’s not extra. It’s just good design.
Got another contrast-checking tool or workflow you love? We’d love to hear about it. Let’s chat.