Making accessible colour choices used to slow us down. You’d tweak a hex, jump to a plugin, check WCAG, jump back, and still second-guess the result. Now? It’s all built into Figma. Native. Real-time. Dead simple. Here’s what’s new and how it’s changing the way we design.
What’s Emerging 🆕
Figma just rolled out live WCAG colour contrast checking inside the colour picker. It auto-detects whether you’re editing text or a graphic and shows a real-time pass/fail rating. If your combo fails? Click the fail icon and Figma snaps it to the nearest accessible colour instantly. You can also toggle between AA and AAA, and use the pass zone visual guide to stay compliant without trial and error.
Why It Matters 🎯
- No more skipped checks – It’s in your workflow, so accessibility happens by default
- Instant feedback – Know what passes or fails without plugins or context switching
- Cleaner systems – Stay compliant without adding off-brand colour variants
- Better handoff – Developers aren’t guessing which colours are compliant—they already are
This update isn’t just convenient. It removes the friction that used to make accessibility a chore.
How to Explore It 🔍
Give this a try next time you’re designing a component:
- Select a text or shape layer
- Open the colour picker—check the contrast rating
- If it fails, click the indicator to auto-fix
- Toggle AAA to see where your palette sits
- Use the boundary line to stay in the pass zone
- Manually tweak with clarity if you need full control
No extra tools. No breaking flow. Just accessible colour choices, baked in.
What I’ve Seen Work 💬
We used to rely on plugins like Stark or separate contrast checker websites. But not everyone installed them. Not everyone remembered to use them. With this update, every designer on the team is making accessible choices without thinking twice. One of our juniors even said, “I didn’t realise I’d fixed a contrast issue—it just worked.” That’s how it should feel. No shame. No extra steps. Just better design.
Try This Now ✅
Design a component with hover, focus, and disabled states. Use the built-in contrast checker to validate each one. If something fails, click once to fix it—then ship with confidence.
Final Thought
Figma didn’t just add a feature. They made accessibility invisible. It’s fast, frictionless, and already in your hands. Try it in your next sprint—and see how it shifts your team’s design habits. Got a faster method? Tell me—I might feature it.
