Color Contrast Grid for Figma variables

Ensure your designs are accessible and inclusive with the power of automated color analysis! The Color Contrast Grid for Figma variables plugin reviews your Figma color variables to create a comprehensive contrast matrix that simplifies accessibility checks.

Key Benefits:

Automatic Variable Scanning: Seamlessly analyzes your Figma color variables, eliminating manual input and making it easy to assess all color combinations in your design system.

Detailed Contrast Ratios: Generates a matrix showing the contrast ratios between background and foreground color variables to identify potential accessibility issues.AA/AAA Compliance Indicators: Clearly marks which combinations meet WCAG AA and AAA standards, empowering you to meet accessibility guidelines effortlessly.

Color-Coded Visualization: Presents results in an intuitive format, complete with color swatches, text previews, and clear labels for quick identification.

Flexible for any Design System: Handles different variable structures and groups, from small projects to expansive design systems, adapting to your workflow seamlessly.

Ideal for UX/UI designers aiming to build accessible, WCAG-compliant designs with minimal effort and maximum efficiency. Integrate accessibility checks into your design process by harnessing the full power of your Figma variables.* Current Limitations *Does not support alpha valuesOnly supports WCGA color contrast calculations (no support for apca calculations)I will work on those limitations and hopefully release new versions from time to time that support alpha values, modes and APAC color contrast calculations.