Figma Color Contrast Checker: WCAG AA & AAA Plugin
Check color contrast ratios directly inside Figma. Select any text layer to see WCAG AA and AAA compliance instantly. Get AI-powered suggestions to fix failing colors without leaving your canvas.
How to Use the Figma Plugin
-
Step 1: Install
Open Figma and search for 'A11y Color Contrast Checker' in the Community plugins tab. Click Install.
-
Step 2: Open the Plugin
Select any frame or layer in your design. Go to Plugins menu and open A11y Contrast Checker.
-
Step 3: Check Contrast
The plugin shows the contrast ratio between your text and background colors instantly with AA and AAA pass or fail result.
-
Step 4: Fix Failing Colors
If a combination fails, the plugin suggests the nearest accessible color alternative automatically.
What the Plugin Checks
WCAG 2.2 AA Compliance
Checks normal text (4.5:1) and large text (3:1) against AA standard.
WCAG 2.2 AAA Compliance
Checks normal text (7:1) and large text (4.5:1) against AAA standard.
Real-time Ratio Calculation
Contrast ratio updates instantly as you select different layers inside Figma.
Accessible Color Suggestions
When a color fails, suggests the nearest passing alternative to preserve your design intent.
What Designers Are Saying
Reviews from Figma Community
"This is really good and helpful. It will make designing more easy."
Eunice Adorkor
Figma Community
"I love how it helps to suggest colours. Makes design easy especially when trying to choose a text colour."
Ngozi Kolapo
Figma Community
"Helped me identify a color below 4.5:1. Suggests options to improve accessibility while keeping flexibility in the design."
Juan
Figma Community
"Doesn't just show contrast issues but also suggests accessible color alternatives, which could save time during design."
Maryam Soleimany
Figma Community
"Make sense, just tried it out now. Kudos."
Amarachi Mbanta
Figma Community
"Finally a contrast tool that works the way designers think. Instead of just flagging failures, it suggests fixes that actually fit the design. Saved me a lot of back and forth."
Sara Mitchell
Figma Community
150+ designers
already using the plugin to check contrast inside Figma
Frequently Asked Questions
Does the plugin work with Figma Dev Mode?
Yes. The plugin runs in both design and Dev Mode, making it useful for designers and developers reviewing handoff files.
Is the plugin free?
Completely free. Install it once from the Figma Community and use it on any file with no limits.
Does it check contrast for images?
The plugin checks solid color combinations. For text on images, use our web-based contrast checker to sample colors manually.
What WCAG version does it support?
The plugin checks against WCAG 2.2, the latest version of the Web Content Accessibility Guidelines published by W3C.
Can I use it on component libraries?
Yes. The plugin works on any Figma file including design systems and component libraries. Select any layer to check its contrast.
Does it work on Figma for mobile?
The plugin works in the Figma desktop app and Figma in the browser. Mobile app support depends on Figma's plugin availability.
Prefer working in the browser? You can also use the online AI color contrast checker to test HEX, RGB, and HSL values directly in your browser and get accessible color suggestions, no install needed. Learn how ratios map to WCAG in the WCAG contrast guide.