Back to Plugins
Text Contrast

Text Contrast

Figure out text contrast issues reported directly on the artboard.

contrasttextaccessibilitycheckerinclusive designcontrast checkerwcagaaaccessiblecoloraaaa11y

Plugin Preview

Text Contrast 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:

  1. The plugin quickly calculates contrast ratios between text and its background, ensuring compliance with WCAG 2.2 standards.


  1. 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.


  1. The plugin won’t alter your design. Results are shown as an overlay, maintaining your original layout.


  1. Select your artboard, click "CHECK", and voilà! Get immediate results without leaving your workflow.



How It Works:

  1. Easy Interaction: Select your artboard and click "CHECK." The plugin analyzes the contrast between the text color and its parent fill color.


  1. Focused Analysis: The calculation is based on the contrast ratio and font sizes, providing fast, accurate results for single color text layers.



Limitations:

  1. The plugin operates over frames, groups, and components but only supports one artboard at a time.


  1. 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

Version1
CreatedOctober 4, 2024
Last UpdatedOctober 4, 2024
CategoryAccessibility tools
CreatorBasile Fécourt
Stats21 installs, 9 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.ts
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none