Contrast Checker
Ensure your designs are accessible and visually optimised with this contrast checker for Framer. Input HEX, RGB, or HSL values, or use the built-in colour picker to instantly check WCAG compliance—right on the canvas.
About this Plugin
Design with Accessibility in Mind
As a designer or developer in Framer, you understand the importance of clarity, readability, and accessibility. The Contrast Checker Plugin ensures your colour choices meet WCAG accessibility standards, helping you create inclusive and compliant designs effortlessly.
⚡ Features Built for Designers & Developers
✔️ Supports HEX, RGB, and HSL Inputs – Enter colours in your preferred format.
✔️ Integrated Colour Picker – Select colours from your canvas for precise testing.
✔️ Live Preview – Instantly see how text appears on your selected background.
✔️ WCAG Compliance Testing – Check against AA & AAA contrast ratios for normal and large text.
✔️ One-Click Copy Results – Easily share contrast scores and compliance status.
🚀 Why This Plugin Matters
Optimise readability for all users with accessible colour contrast.
Ensure compliance with WCAG standards effortlessly.
Save time by testing and adjusting directly within Framer.
Improve UI consistency, making your designs more polished and professional.
💡 Perfect for UI/UX designers, developers, and accessibility-focused teams who want to build with inclusivity in mind.
🔗 Install the plugin and make accessibility a natural part of your workflow!
Changelog
Updated the UI to use the Framer colour variables so it feels more familiar to users
Updated certain texts to 12px and updated plugin width to 440px, so there's more screen real-estate to view your work while the plugin is open.
Details
Oladipupo Ayoola
