Contrast checker

About this plugin

Contrast Checker is a Figma plugin designed to help designers ensure their designs are accessible by automatically analyzing text and background color contrast within selected frames. The plugin checks for compliance with accessibility standards, highlights potential issues, and provides detailed reports, enabling you to create inclusive and user-friendly designs effortlessly.

What the Plugin Does

•Automatic Contrast Analysis: The plugin scans selected frames to identify text elements and their background colors, calculating the contrast ratio between them.

•Accessibility Compliance: It checks whether the contrast ratios meet the WCAG (Web Content Accessibility Guidelines) standards, specifically for normal and large text.

•Detailed Reports: After analysis, the plugin generates a comprehensive report that highlights any text elements that do not meet the required contrast ratios, providing actionable feedback.

•Issue Highlighting: Users can locate specific elements with contrast issues directly within their design by using the “Locate” feature.

•Ignore Option: If certain elements are intentionally designed with lower contrast, users can choose to ignore those specific issues.

How to Use the Plugin

1.Select a Frame: Start by selecting the frame or frames within your Figma document that you want to analyze.

2.Run the Plugin: Launch the Contrast Checker plugin. It will automatically start analyzing the selected frame(s).

3.View the Report: Once the analysis is complete, view the detailed report generated by the plugin. This report will list all the text elements within the frame(s) and indicate whether they meet the required contrast ratio.

4.Address Issues: Use the “Locate” button to find and fix elements with contrast issues in your design.

5.Manage Issues: Optionally, ignore any issues that you don’t need to fix by using the “Ignore” feature.

Limitations

•Text Detection: The plugin only analyzes visible text elements and solid background colors. It may not correctly analyze text with gradient backgrounds, images, or complex overlays.

•Performance: The plugin performs best on smaller frames or a limited number of selected frames at once. Analyzing very large frames with numerous text elements may take longer.

•Customization: Currently, the plugin does not support custom contrast thresholds beyond the WCAG standards, and it does not provide options for customizing the analysis parameters.

By using the Contrast Checker, designers can ensure their work is accessible, improving the overall inclusivity of their designs.