Back to Plugins

Text Contrast
Figure out text contrast issues reported directly on the artboard.
contrasttextaccessibilitycheckerinclusive designcontrast checkerwcagaaaccessiblecoloraaaa11y
Plugin Preview
About this plugin
The fastest contrast checker in the galaxy!
Text Contrast lets you instantly run a AA or AAA contrast report on all text across your selected mockups before you can blink.
Simply select a frames, groups, or components, and hit Check.
A detailed report will automatically display next to your artboard, giving you immediate feedback on color contrast compliance.
Hot Features:
- The plugin quickly calculates contrast ratios between text and its background, ensuring compliance with WCAG 2.2 standards.
- No need to be an expert, results appear instantly as a visual copy next to the original, with a focus on contrast and font size.
- The plugin won’t alter your design. Results are shown as an overlay, maintaining your original layout.
- Select your artboard, click "CHECK", and voilà! Get immediate results without leaving your workflow.
How It Works:
- Easy Interaction: Select your artboard and click "CHECK." The plugin analyzes the contrast between the text color and its parent fill color.
- Focused Analysis: The calculation is based on the contrast ratio and font sizes, providing fast, accurate results for single color text layers.
Limitations:
- The plugin operates over frames, groups, and components but only supports one artboard at a time.
- It currently does not support gradients or mixed color/font size text layers.
This is my first plugin, so feel free to share any feedback ♥️
Plugin Details
Version | 1 |
---|---|
Created | October 4, 2024 |
Last Updated | October 4, 2024 |
Category | Accessibility tools |
Creator | Basile Fécourt |
Stats | 21 installs, 9 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.ts
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Accessibility tools category.