Figma Contrast Checker

About this plugin

Ensure your designs are accessible to everyone. Contrast Checker is a lightweight, real-time accessibility companion built directly for Figma. It helps you design for compliance under WCAG 2.1 guidelines (AA & AAA standards) with instant feedback and smart, automated corrections. ✨ Key FeaturesReal-time Contrast Analysis: Select any text layer to instantly verify its contrast ratio against its solid background. The plugin automatically crawls parent frames and overlapping layer geometries to accurately find background fills.Bulk Audit Frame Mode: Select a frame, group, or component set to scan all nested text layers at once. View a compliance checklist of all layers in a clean, scrollable dashboard, and jump to failing layers instantly.Smart Color Fixer: If a text layer fails WCAG guidelines, the plugin uses an HSL-shifting binary search to suggest the closest color lightness that passes AA or AAA standards. Apply the fix back to your canvas with a single click.WCAG 2.1 Compliance Badging: Clear indicator ratings separating AA Normal/Large and AAA Normal/Large checks.🚀 How to Use1. Run the plugin.2. Select any text layer or layout shape to view its live contrast metrics and color swatches.3. If it fails, click one of the Suggested Color Fixes buttons to instantly update the text fill on your canvas.4. Select a parent frame or group to switch into Bulk Check Mode and audit multiple layers at once.