Back to Plugins
Advanced Contrast Checker

Advanced Contrast Checker

Check WCAG and APCA text contrast over real backgrounds.

Plugin Preview

Advanced Contrast Checker preview

About this plugin

Advanced Contrast Checker helps designers check whether text stays readable over real design backgrounds — including images, gradients, overlays, and mixed-tone sections.Unlike basic contrast tools that compare two flat colors, this plugin analyzes the selected frame, group, or component/instance, samples the background behind each text layer and, using the 5th percentile calculation, reports results comparing to both WCAG and APCA.Best used forText over images.Text over gradients.UI sections with layered or mixed backgrounds.Quick accessibility reviews before handoff.How to useSelect a frame, group or component/instance.Run the plugin.Review each text layer’s WCAG and APCA result.Open any Review or Fail result to see the suggested fix, metrics, and readability map.Adjust the design and rescan.What it doesScans visible text layers inside your selected container.Checks contrast against WCAG AA/AAA thresholds.Checks perceived readability with APCA.Handles complex backgrounds using sampled background data.Shows Pass, Review, and Fail states.Provides contextual suggested fixes.Includes a readability map to show where contrast issues happen.NotesResults are based on the selected container and the current visual state of the design. Re-scan important breakpoints, variants, and production imagery before final handoff.

Plugin Details

Version2
CreatedMay 25, 2026
Last UpdatedMay 25, 2026
CategoryAccessibility tools
CreatorDaniel Salomon
Stats1 installs, 1 likes
PricingFree

Technical Details

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